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