CSS中仅修改图片宽度时高度为何自动变化？

嘿，这个问题其实是浏览器处理图片元素的默认行为导致的，很常见！

核心原因是：图片元素默认会保持自身的原始宽高比（aspect ratio）。当你只修改了宽度属性时，浏览器会自动根据图片原始的宽高比例，计算出对应的高度值，以此避免图片被拉伸或压缩变形，保证视觉上的正常显示。

举个实际例子帮你理解：
假设你的原始图片尺寸是800px（宽）× 600px（高），它的宽高比是4:3。当你通过img{ width: 25%; }设置宽度为容器的25%时：

• 如果容器宽度是1000px，那么图片的实际宽度就变成了250px
• 浏览器会自动计算高度：250px × (600/800) = 187.5px，这样高度就跟着变了，但宽高比还是保持4:3

如果你想要强制固定高度而忽略宽高比，可以显式设置height属性，比如：

img{
  width: 25%;
  height: 200px; /* 固定高度 */
}

不过这么做可能会导致图片变形。如果想保持宽高比同时控制高度，或者让图片适应容器而不变形，可以用object-fit属性，比如：

img{
  width: 25%;
  height: 200px;
  object-fit: cover; /* 裁剪图片填充容器，保持比例 */
  /* 或者用 object-fit: contain; 让图片完整显示，可能留空白 */
}

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