我正在向div添加背景图像。
<div class="image" style="background-image: url(...)>
</div>
CSS 是动态的。例如...
.image {
width: 65%;
height: ? (trying to figure out the value)
}
我正在尝试以js为单位计算高度,以保持图像的纵横比。
如果我知道原始图像的宽度和高度(以 px 为单位(,如何在 CSS 中设置正确的高度值,基于 CSS 中的宽度(以 % 为单位设置(以保持图像大小比?
问题看起来像这样:
图像宽度 = 300px
图像高度 = 520px
CSS 中的宽度 = 65%
CSS 中保持纵横比的高度 = ?
我不能使用父容器的宽度进行计算。
我无法使用offsetWidth
抓取 px 格式的动态图像宽度。
我不能只在div 中使用图像。
您不需要知道图像的原始尺寸。为图像设置一个维度会自动设置另一个维度,以便保持纵横比。下面是一个示例:
原始图片 (400px x 300px(
<img src="https://i.stack.imgur.com/lKtag.png"/>
调整大小的图像(容器宽度的 40%(
<img src="https://i.stack.imgur.com/lKtag.png" style="width:40%"/>