直接给img加max-width: 100%和height: auto是实现等比缩放的基础方案，但必须确保父容器有可计算宽度、避免width: 100%强制拉伸、禁用固定height、建议加display: block防空白，并配合srcset/sizes优化高清屏加载与带宽效率。
直接给 img 加 max-width: 100% 和 height: auto 就能实现基础自适应宽度，但多数人卡在父容器没约束、样式被覆盖或误用 width: 100% 上。
为什么 max-width: 100% + height: auto 是必须组合
单独设 width: 100% 会让图片强制拉伸变形，因为浏览器会忽略原始宽高比；而 max-width: 100% 表示“最多占满父容器”，height: auto 则强制按原图比例计算高度——两者配合才真正等比缩放。
- 不要写
width: 100%; height: auto，它在多数现代浏览器中行为不稳定，尤其 Safari 会忽略height: auto - 避免同时设置
height行内属性（如height="400"）或 CSS 固定高度，否则会覆盖height: auto -
display: block建议加上，防止图片下方出现意外空白（由行内元素基线对齐引起）
父容器没宽度是响应式失效的最常见原因
如果 img 的父级 <div> 没显式宽度（比如只写了 margin: 0 auto 却没设 width 或 max-width），那么 max-width: 100% 就失去参照，图片仍按原始尺寸渲染。
- 确保父容器有可计算的宽度：例如
width: 100%、max-width: 1200px，或处于flex/grid容器中且未被flex-shrink: 0锁死 - 检查开发者工具的 Computed 面板，确认父容器的
width不是auto或0px - 某些 UI 框架（如 Bootstrap）默认设了
img { max-width: 100% }，但你若在行内写了width="100%"，反而会覆盖它并导致变形
什么时候必须加 srcset + sizes
CSS 缩放只是让图片“看起来小”，浏览器仍会下载原始大图。如果图片在小屏上实际只渲染 320px 宽，却加载了 1200px 的图，就是带宽浪费+首屏延迟。
立即学习“前端免费学习笔记（深入）”；
- 当页面有明确断点布局时（如移动端占满视口、桌面端固定 600px 宽），必须配
sizes，否则srcset中的w单位不生效 - 典型写法：
<img src="fallback.jpg" srcset="small.jpg 320w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 600px"> - 注意
sizes值必须和真实 CSS 渲染宽度一致：如果用grid布局让图片占 1fr，就别写sizes="100vw"，应测出实际像素宽度再换算
object-fit 不是响应式宽度方案，而是容器固定时的填充策略
如果你的父容器宽高都固定（比如卡片头图 height: 200px），那 max-width: 100% 会导致留白或溢出——这时该用 object-fit，但它和响应式宽度是两回事。
-
object-fit: cover：等比缩放+裁剪，适合封面图；需配object-position: center或top控制裁剪起点 -
object-fit: contain：等比缩放+完整显示，适合产品图；留白是正常行为，不是 bug -
object-fit必须搭配显式宽高容器才起作用，且 IE 不支持，fallback 方案要用background-image，但会丢失alt和语义
真正容易被忽略的是：响应式图片不只是“让它变小”，而是“让它在正确时机加载正确尺寸”。max-width 解决显示问题，srcset+sizes 解决加载问题，两者缺一不可；而所有这些的前提，是父容器宽度可预测、无冲突样式覆盖。
