响应式图片必须同时设置 max-width: 100% 和 height: auto，前者防溢出，后者保比例；flex 容器中还需加 min-width: 0 防止收缩失效；固定容器需搭配 object-fit 控制填充方式；display: block 消除内联空白。
直接给 img 加 max-width: 100% 和 height: auto 是响应式图片的底线，漏掉任意一条都会导致溢出或变形——这不是“可选优化”，而是必须写的 CSS。
为什么必须同时写 max-width: 100% 和 height: auto
只写 max-width: 100%，浏览器会把宽度限制住，但高度仍按原始值渲染（或 fallback 到默认行为），结果就是图片被横向压缩、纵向拉长；只写 height: auto 而不设宽度约束，图片照样会撑破窄容器。两者是绑定生效的组合：
-
max-width: 100%防止图片超出父容器，但它允许图片比容器小（比如一张 200px 宽的图放在 500px 宽的盒子里） -
height: auto强制浏览器按原始宽高比缩放，否则 width 改变后 height 不联动，必然失真 - 别用
width: 100%替代——它会把小图强行拉满，造成模糊和像素失真
flex 容器里 img 必须加 min-width: 0
在 display: flex 的父容器中，img 默认继承 min-width: auto，这会阻止它收缩到小于自身固有尺寸，导致 max-width: 100% 失效，尤其在小屏下图片卡在原始宽度、溢出容器。
- 修复方式很简单：
img { max-width: 100%; height: auto; min-width: 0; } - 这个
min-width: 0是 flex 布局下的特例，Grid 或普通块级流里不需要 - 如果不加，即使写了
max-width，控制台里能看到 computed width 是 100%，但实际渲染宽度仍是原始值
用 object-fit 控制图片在固定容器内的填充方式
当容器有明确宽高（比如卡片、头像框、网格项），而图片原始比例不一致时，max-width 就不够用了——你需要裁剪或缩放内容本身，而不是仅缩放整个元素。
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放并裁剪，填满容器（最常用，类似background-size: cover） -
object-fit: contain：等比缩放并完整显示，可能留白 - 必须配合显式宽高设置才生效，例如
width: 100%; height: 200px;，否则object-fit无作用 - 注意：IE 不支持，旧版 Safari 对
object-fit的支持也不稳定，生产环境需评估兼容性
别忽略 display: block 带来的底部空白问题
img 是内联元素，默认 baseline 对齐，下方会留出约 4px 空隙（来自行高的 descent 区域）。在纯图片布局或需要精确对齐的场景下，这点空白会导致错位或意外滚动条。
- 加
display: block是最轻量、最通用的解法 - 也可用
vertical-align: top/middle/bottom，但语义不如block清晰，且在复杂嵌套中容易失效 - 如果图片是链接的一部分（如
a > img），加block后记得检查链接点击区域是否受影响
真正麻烦的不是写错某一行 CSS，而是改了布局（比如从 float 换成 flex）却忘了同步更新 img 的最小宽度策略，或者在 Grid 网格里给图片设了固定宽高却没配 object-fit——这些细节不会报错，但会在某个设备上突然露出破绽。
