为三张图片设置max-width后第三张尺寸异常的技术问询

嘿，我明白你遇到的困惑了——加了max-width:100%后第三张图片就变小，移除后反而一致，这其实和图片的原始尺寸直接相关。

问题根源 #

你的.side-content-image容器宽度是父元素的35%，当给图片设置max-width:100%时：

• 如果图片原始宽度大于容器宽度，图片会被压缩到容器的100%宽度，和容器尺寸匹配；
• 但如果第三张图片的原始宽度本身就小于容器的35%宽度，max-width:100%就不会生效，图片会以自己的原始尺寸显示，自然比另外两张小。

而移除max-width:100%时，浏览器的默认样式可能会强制图片撑满容器，所以三张看起来一致，但这并不是可靠的响应式写法。

解决方案 #

要让所有图片不管原始尺寸如何，都能自适应容器且保持一致尺寸，只需要给图片加上width:100%，同时保留height:auto维持图片比例：

修改后的CSS代码：

.side-content-image {
  width: 35%;
  height: auto;
  border: 1px solid blue;
}

.side-content-image img {
  width: 100%; /* 强制图片占满容器宽度 */
  max-width: 100%; /* 兜底防止图片溢出容器 */
  height: auto; /* 自动计算高度，保持原始比例 */
}

效果说明 #

• width:100%会让图片强制铺满.side-content-image容器的宽度，不管它原始尺寸是大是小；
• height:auto保证图片不会变形，始终保持原始宽高比；
• max-width:100%作为兜底，防止未来容器尺寸意外小于图片原始尺寸时，图片不会溢出容器。

这样修改后，三张图片就会完全一致，同时具备响应式特性——当容器宽度变化时，图片也会跟着自适应缩放。

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