以 % 为单位保持 div 的纵横比，知道以 px 为单位的高度和宽度答案

【问题标题】：Maintain aspect ratio of div in %, knowing the height and width in px以 % 为单位保持 div 的纵横比，知道以 px 为单位的高度和宽度
【发布时间】：2018-10-08 03:29:43
【问题描述】：

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

图像高度 = 520 像素

CSS 中的宽度 = 65%

保持纵横比的 CSS 高度 = ?

我无法使用父容器的宽度进行计算。

我无法使用 offsetWidth 获取以 px 为单位的动态图像宽度。

我不能只使用 div 中的图像。

【问题讨论】：

您说您知道原始图像尺寸。你为什么不直接做（原始高度）÷（原始宽度）×（新宽度）？

标签： javascript math

【解决方案1】：

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

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

&lt;img src="https://i.stack.imgur.com/lKtag.png"/&gt;

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

&lt;img src="https://i.stack.imgur.com/lKtag.png" style="width:40%"/&gt;

【讨论】：