保持 div 的纵横比(以 % 为单位),知道高度和宽度(以 px 为单位)



我正在向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%"/>

最新更新