我使用一个巨大的图像作为我的 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 解决方案。
最佳答案
关于javascript - 表格或 Div 高度和宽度调整为背景图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36741944/