如何根据HTML容器已知宽度计算图片的缩放高度？

要实现图片按容器宽度等比缩放，核心是保持图片宽高比不变，计算逻辑如下：

1. 先算出缩放比例：缩放比例 = 容器宽度 / 原图宽度
2. 用原图高度乘以该比例，得到缩放后的高度

完整代码实现 #

var wid    = document.getElementById('wrapid').offsetWidth; // 容器宽度
var width  = imageWidth; // 原图宽度
var height = imageHeight; // 原图高度
var hei    = Math.round(height * (wid / width)); // 计算缩放后高度，用Math.round处理像素取整

验证示例 #

• 原图尺寸600x591，容器宽度740：
  591 × (740/600) ≈ 591 × 1.233 ≈ 729，与给出的结果一致
• 原图尺寸1170x574，容器宽度740：
  574 × (740/1170) ≈ 574 × 0.632 ≈ 363，符合示例结果

补充说明 #

• 该逻辑适配容器宽度大于或小于原图宽度的场景，都会自动按比例缩放
• 使用Math.round()是为了让高度取整，避免小数像素引发的渲染问题，也可根据需求替换为Math.floor()或Math.ceil()

内容的提问来源于stack exchange，提问作者Ajith