HTML/CSS中仅设置img宽度与边框宽度时，高度如何计算？

嘿，刚好对这个点熟，来给你掰扯清楚～当你给<img>设了width和border-width但没指定height时，浏览器的计算逻辑其实是分两步走的：

• 核心：严格保持图片原始宽高比
  <img>属于CSS里的「替换元素」，它天生自带原始的宽高尺寸。当你只指定width时，浏览器会自动根据图片的原始宽高比例，算出对应的内容区高度。举个例子：如果你的图片原始尺寸是800px宽、600px高（4:3的比例），你设置了width: 400px，那内容区的高度就会自动算成300px。

• 边框是额外叠加的尺寸
  你设置的border-width是在图片内容区之外的（属于CSS盒模型的「边框区域」），所以最终整个<img>元素的总高度是「计算出的内容区高度 + 上下边框的宽度之和」。还是刚才的例子，如果你加了border-width: 5px，那总高度就是300px + 5px*2 = 310px。

• 特殊情况：无原始尺寸或加载失败
  如果是没有固有尺寸的图片（比如某些SVG），或者图片加载失败了，浏览器会 fallback 到默认的内容区高度（一般是150px左右），再加上上下边框的宽度。

给你个简单的代码示例，方便理解：

img {
  width: 400px;
  border-width: 5px;
  border-style: solid; /* 别忘了加这个，不然边框不会显示出来 */
  border-color: #333;
}

其实这个规则是CSS盒模型和替换元素默认行为的结合，有时候文档不会单独把这俩点放一起讲，所以容易找不到明确说明～

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