width: 100%会拉伸变形，因其强制撑满父容器宽度却不联动缩放高度，宽高比断裂；必须搭配max-width: 100%和height: auto——前者防溢出，后者按原始比例自动计算高度，缺一不可。

img 为什么加 width: 100% 会拉伸变形

因为 width: 100% 强制把图片宽度撑满父容器，但浏览器不会自动按比例缩放高度——它默认把 height 当作 auto，而 auto 在 width 改变后不联动计算，结果就是宽高比崩了。常见于 flex 容器里图片被压成一条线。

必须配对使用：max-width: 100% + height: auto。前者防溢出，后者保比例。漏掉任一，都算没真正响应式。

• max-width: 100%：允许图片比容器小（比如小图放大盒子里），但绝不超限
• height: auto：让浏览器按原始宽高比重算高度，不是“保持原高度”
• 别写 width: 100%; height: 100%，那是背景图逻辑，<img alt="响应式布局下HTML响应式图片的大小控制" > 不适用

flex 或 grid 容器里图片塌陷怎么办

明明写了 flex: 1 或 grid-column: span 2，图片却缩成像素级细线——大概率是父容器没约束尺寸，或子元素被 flex 默认行为卡住收缩。

Chrome 和 Safari 中，<img alt="响应式布局下HTML响应式图片的大小控制" > 在 flex 容器内默认有 min-width: auto，这会阻止它随容器缩小。解决只需一行：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

立即学习“前端免费学习笔记（深入）”；

• 给 <img alt="响应式布局下HTML响应式图片的大小控制" > 加 min-width: 0（不是 min-width: 0px）
• 确保父容器有明确宽度，比如 width: 100% 或 max-width: 1200px
• 如果用 Grid 布局，推荐 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))，比 flex-wrap 更稳

srcset 和 sizes 不生效的典型原因

写了 srcset 却还是加载大图？浏览器直接忽略整个属性，往往是因为以下任一条件不满足：

• sizes 属性缺失：没有 sizes，浏览器无法判断“这张图打算占多宽”，只能退化为加载 src
• sizes 值与真实布局脱节：比如图片在栅格中只占 1/3 宽，sizes 却写成 "100vw"，浏览器误判目标宽度，选错资源
• srcset 混用单位：不能同时写 "small.jpg 480w, big.jpg 2x"，必须统一用 w（如 480w）或统一用 x（如 2x）
• 旧版 Safari（w 描述符，可降级用 x 或补 fallback src

什么情况非用 不可

当需求超出分辨率适配范畴，比如需要「竖屏裁人脸、横屏展全景」，或「优先 WebP，不支持就降级 JPEG」，<img alt="响应式布局下HTML响应式图片的大小控制" > 的 srcset 就不够用了——它只响应 DPR 和视口宽度，不处理媒体类型或构图逻辑。

<picture></picture> 是唯一解，但要注意匹配规则是 AND 关系：

• 每个 <source></source> 的 media 和 type 必须同时满足，浏览器才选用
• 顺序很重要：最具体规则（如 (min-width: 1024px) and (min-resolution: 2dppx)）放最前
• type="image/webp" 拼错（比如多写分号或空格）会导致整条 <source></source> 被跳过
• 兜底的 <img alt="响应式布局下HTML响应式图片的大小控制" > 必须存在，且带 src 和 alt，否则无图可显

实际部署时最容易被绕开的点：CSS 布局改了，但 sizes 没同步更新；或者 srcset 提供的宽度候选值（如 480w, 768w）和 sizes 计算出的目标物理像素不匹配——这时浏览器宁可加载低清图，也不愿猜。