只设 width: 100% 会导致图片强制拉伸失真或撑破视口引发横向滚动；必须配合 max-width: 100% 和 height: auto 才能自适应且保持清晰比例。
图片设 width: 100% 但不加 max-width 会出什么问题
只设 必须配合 实操建议： 立即学习“前端免费学习笔记（深入）”； 典型陷阱： 基础写法示例： 注意： 真正容易被忽略的点：CSS 响应式图片生效的前提是图片 HTML 结构本身没写死 width: 100% 会让图片强行拉伸填满父容器，哪怕原始尺寸很小（比如 50×50 像素），在大屏上也会模糊失真；更常见的是——当父容器本身没限制宽度（比如 或未设 max-width 的
max-width: 100% 是关键，不是可选项max-width: 100%，才能让图片「在不超过自身原始尺寸的前提下，尽可能占满容器」。浏览器会取「100% 容器宽」和「图片原始宽」中的较小值作为最终渲染宽度。
max-width: 100%，哪怕你确定它不会超height: auto，避免高度塌陷或比例错乱box-sizing: border-box 防止溢出img {
width: 100%;
max-width: 100%;
height: auto;
}
为什么不用
width: 100vw 或 width: 100% 单独撑满屏幕100vw 是视口宽度，会忽略 body margin、滚动条宽度，容易导致水平溢出；100% 依赖父容器宽度，而很多移动端布局中父容器没设宽度，结果还是无效。
width 或 max-width，width: 100% 实际计算为 0
inline 元素，默认有底部空白（基线对齐导致），需加 display: block 或 vertical-align: top
需要适配 Retina 屏？记得检查
srcset 和 sizes
width: 100%; max-width: 100% 只管布局，不管像素密度。如果图片在 iPhone 上发虚，说明没提供 2x/3x 资源。@@##@@
sizes 值要匹配你的 CSS 布局逻辑，否则浏览器选错资源。width 或 height 属性（比如 
width: 100%）。
