正确做法是img{width:100%;height:auto;min-width:0;}，前提是父容器有明确宽度且清除内联宽高属性；否则图片会变形、溢出或不缩放。
直接给 img 加 width: 100%; height: auto; 就能等比缩放适应容器宽度，但前提是父容器有可计算宽度，且没写内联 width/height 属性——漏掉任一条件，图片就会变形、溢出或不缩放。
为什么只写 width: 100% 不够？
浏览器对替换元素（如 img）的默认行为是：若未声明 height，会按原始尺寸渲染高度；一旦只设 width: 100% 而没配 height: auto，它就失去宽高比约束，可能被拉伸或压扁。
- 常见错误现象：
<img src="a.jpg" style="max-width:90%" style="max-width:90%">—— 内联尺寸会覆盖height: auto，导致缩放失效 - 正确做法：删掉 HTML 中的
width和height属性，全交由 CSS 控制 - 如果必须保留内联属性（如 CMS 输出不可控），用 JS 清除：
img.removeAttribute('width'); img.removeAttribute('height');
max-width: 100% 和 width: 100% 选哪个？
二者效果在多数流式布局中一致，但语义和容错性不同：max-width: 100% 允许图片在小于容器时保持原尺寸，width: 100% 强制撑满。实际项目中更推荐后者，因为“自适应”本意就是随容器变化，而非“不超过”。
- 关键差异点：
width: 100%在 flex/grid 容器中可能因min-width: auto阻止收缩，需额外加min-width: 0 -
max-width: 100%天然兼容 flex-shrink，但小图不会放大，可能留白 - 现代推荐写法：
img { width: 100%; height: auto; min-width: 0; }（兼顾流式、flex、grid）
固定尺寸容器里怎么让任意比例图填满？
当容器宽高都固定（比如 80px × 80px 的头像框），单纯靠 width: 100% 无法解决横图/竖图/正方图混用的问题，必须用 object-fit。
- 设容器：
width: 80px; height: 80px; overflow: hidden; - 设图片：
width: 100%; height: 100%; object-fit: cover;（裁剪居中填满） - 兼容性注意：
object-fit在 IE 完全不支持；iOS Safari ≤ 14.5 需加-webkit-object-fit: cover; - 无
object-fitfallback 方案：改用background-image+background-size: cover，但会丢失alt和 SEO
真正容易被忽略的是 sizes 属性——它不控制显示，却决定浏览器加载哪张图。哪怕 CSS 写得再完美，sizes="(max-width: 768px) 100vw, 50vw" 写错一个单位（比如写成 50%），srcset 就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
