我将一张大图片用作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%