如何通过CSS使图片响应式布局，仅用max-width:100%实现自适应容器尺寸？

本文共计752个文字，预计阅读时间需要4分钟。

该功能使图片宽度随容器伸缩，但不会放大超过原始尺寸，避免模糊或失真。关键在于不强制拉伸，仅允许缩小——这与width: 100%的本质区别。

• max-width: 100%：图片在小屏时自动缩放，大屏时保持原宽（不撑爆）
• width: 100%：无论原始尺寸多大，都强行填满容器，高宽比可能错乱，小图被拉伸糊掉
• 必须搭配 height: auto，否则图片会被压扁或裁切

必须同时设置 height: auto 吗

是的，漏掉这句是常见翻车点。CSS 默认对替换元素（如 <img>）的 height 不继承，一旦只设 max-width，浏览器会按原始高度渲染，导致缩放后宽高比断裂。