我将一张大图片用作div的背景。该图像仅需显示一次,容器在保持纵横比的同时允许的最大尺寸。图像可以具有任何纵横比。容器的大小可以调整大小,也可以具有任何长宽比。我设法做到这一点

background-size:contain;
background-repeat:no-repeat;
background-position: center center;
width:100%;
height:100%;
background-image: url("path/to/img");


在该图像的“上方”,我需要一个8x8的表格布局,该布局与背景图片一起变得越来越小。

在我的jsfiddle示例中,您具有正确工作的图像(尝试调整输出窗口的大小),但是我不知道如何使我的表始终直接在该图像上缩放(想法是,字段A1将始终在特定位置标记完全相同的位置图片,无论大小,图片长宽比,容器长宽比,...)

https://jsfiddle.net/15uovq7L/4/

如果没有针对此问题的CSS / HTML选项,则适用jQuery / JavaScript解决方案。

最佳答案

https://jsfiddle.net/15uovq7L/5/

padding-top: 46%;中设置.tlorisOgledNacrta

图片高度* 100 /图片宽度为46%

07-24 09:38
查看更多