最稳写法是max-width: 100%和height: auto组合，二者必须同时使用以确保等比缩放、不拉伸、不溢出；单独width: 100%或缺失height: auto会导致变形，且需确保父容器有明确宽度参照。
只设width或height一个属性就能等比缩放
浏览器对 img 标签的 width 和 height 属性有内置比例保护：只要只写其中一个，另一个就会按原始宽高比自动计算。比如原图是 1200×800（3:2），写 <img src="a.jpg" width="300">，高度就自动变成 200；反过来写 height="150"，宽度就是 225。
常见错误是两个都写死却忽略比例，例如：<img src="x.jpg" width="200" height="150"> —— 若原图是 4:3 就没事，但如果是 16:9 或 1:1，必然拉伸变形。
- HTML 中的
width/height值不带单位（width="300"正确，width="300px"无效） - 这两个属性会强制预留布局空间，防止图片加载时“顶开”下方内容，这是它唯一不可替代的价值
- 但它们无法响应视口变化，也不支持百分比高度（
height="50%"完全无效）
CSS里用width: 100%; height: auto;是最稳的响应式底线
这行 CSS 是目前兼容性最好（IE9+）、防崩能力最强的写法，尤其适合 CMS、文章页这类图片源不可控的场景。
关键点在于：max-width: 100% 是上限，height: auto 才是保比例的核心——缺了它，哪怕写了 width: 100%，也可能被拉变形。
立即学习“前端免费学习笔记（深入）”；
- 必须确保父容器有明确宽度（比如
div { max-width: 1200px; }），否则100%没参照 - 别单独写
width: 100%—— 容器没限宽时，它可能撑满整个视口 - 内联的
width/height属性会覆盖height: auto，得先删掉或用 JS 清除：img.removeAttribute('width')
固定尺寸容器里必须用object-fit + aspect-ratio
当容器宽高都固定（比如卡片是 300×200px），而图片比例五花八门（横图、竖图、正方图混用），仅靠 width: 100%; height: auto 无解。
现代方案是组合使用 aspect-ratio 和 object-fit：
img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
aspect-ratio 让浏览器自动算出高度，object-fit: cover 控制如何填满；若要完整显示，改用 object-fit: contain。
-
object-fit: fill就是拉伸变形的代名词，除非你明确要压扁/拉长 - 必须同时设置
width和height（或至少一个固定，另一个为auto），否则object-fit不生效 - IE11 及更早版本不支持
object-fit，需降级用background-image或 padding-trick
为什么max-width: 100%; height: auto;有时不生效
这行 CSS 看似万能，但实际常失效——不是写错了，而是它依赖父容器提供宽度参照。浏览器计算 max-width: 100% 时，会逐级向上找第一个有明确宽度的祖先元素。
- 父容器只写了
display: flex却没设width或max-width，图片就“找不到 100% 是多少” - Flex 子项默认
min-width: auto，会锁死原始尺寸，导致max-width: 100%被无视 - 某些框架（如 Bootstrap）全局设了
img { max-width: 100% }，但你又加了style="width: 500px"，冲突优先级更高 - 更稳妥组合是：
width: 100%; height: auto; min-width: 0;，并确保父 Flex/Grid 项也加min-width: 0
真正容易被忽略的是：内联 width/height 和父容器缺失宽度这两点，它们比写错 CSS 更常导致比例失控。
