javascript - 表格或 Div 高度和宽度调整为背景图像大小

标签 javascript jquery html css html-table

我使用一个巨大的图像作为我的 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/

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

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

关于javascript - 表格或 Div 高度和宽度调整为背景图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36741944/

相关文章:

html - 如何重构输入占位符类?

javascript - jQuery $ ("body").height() 返回未定义

javascript - 如何使用 javascript/jQuery 根据内部 div 元素内容/值对 div 元素进行排序?

javascript - 如果我更改 Node 版本并执行 npm install,package-lock.json 中的包版本是否会更改?

jquery - 部分 View 更改之间未保留高度空间

jQuery div 悬停功能在 Firefox 中不起作用

html - 按钮高度大于嵌套内容的高度

html - 如何在具有严格文档类型的 HTML 页面中查看阿拉伯/波斯数字?

Javascript 无法显示警报

javascript - 如何在相关组件上制作 Vue 插件函数调用方法?