知道div的高和宽，保持div的长宽比以％为单位

Question

我要向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中使用图片。

Answer 1

您不需要知道图像的原始尺寸。为图像设置一个尺寸会自动设置另一个尺寸，以保持宽高比。这是一个示例：

原始图片（400像素x 300像素）

<img src="https://i.stack.imgur.com/lKtag.png"/>

调整图像大小（占容器宽度的40％）

<img src="https://i.stack.imgur.com/lKtag.png" style="width:40%"/>