javascript - 使用纵横比调整 div 大小以适应内容 css 图像

Question

您好，我有一个 div，作为背景，我有一个宽度为 1920 像素，高度为 1200 像素的图像。div 有 100% 的宽度并window.innerHeight准备好文档；

背景 css 图像具有以下规则：background-size: 100% auto !important; 因此它们是响应式的

我想做的是基于 window.resize 计算 div 元素的新高度并将其设置为与背景图像 css 高度匹配。

Answer 1

如果我理解你的话，你不需要 js

background: url(../img/image.png) no-repeat center top fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Answer 2

newHeight = (1200 * divWidth) / 1920