最稳写法是为img标签设置max-width: 100%和height: auto，二者必须同时使用以确保等比缩放、不拉伸、不溢出；单独width: 100%或缺失height: auto会导致变形，且需确保父容器有明确宽度参照。
img 标签加 max-width: 100% 和 height: auto 是最稳的写法
这组组合能确保图片等比缩放、不拉伸、不溢出容器，是目前兼容性最好、行为最可预测的基础方案。它不依赖 JavaScript，也不挑浏览器版本，从 IE9 到最新 Safari 都支持。
常见错误是只写 width: 100% 或漏掉 height: auto，结果图片被强制拉宽、高度塌陷或变形。尤其在移动端 Safari 中，height: auto 缺失会导致高度计算异常。
-
max-width: 100%让图片宽度最多等于父容器宽度，小屏自动缩小，大屏不超界 -
height: auto告诉浏览器按原始宽高比算高度，这是保持比例的关键 - 不要同时设
width和height固定值（比如width="800" height="600"），会覆盖 CSS 并破坏响应式 - 内联样式也行：
<img src="a.jpg" style="max-width: 100%; height: auto;">
Flex 容器里 <img> 不缩放？得给父项加 min-width: 0
Flex 子项默认有 min-width: auto，会锁死图片原始尺寸，哪怕你写了 max-width: 100% 也无效。这不是 bug，是规范行为。
解决办法不是改图片本身，而是改它的直接父容器（那个 <div class="card">）：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
min-width: 0，解除最小宽度锁定 - 再补一句
max-width: 100%更稳妥（写在父容器上） - 图片自己仍保留
max-width: 100%; height: auto; - 别用
flex-shrink: 1强压图片——对替换元素（如<img>）效果不可靠
object-fit: cover 只在固定宽高的容器里生效
object-fit 不是用来“让图片随窗口缩放”的，它是处理「已知容器尺寸但图片比例不一」时的裁剪策略。没设容器宽高，它就完全不工作。
典型适用场景：头像、卡片封面、轮播图容器。
- 容器必须显式设
width和height，例如：.avatar { width: 80px; height: 80px; } - 然后图片加
object-fit: cover（填满裁边）或object-fit: contain（完整显示留白） - 老版 iOS Safari（≤12.5）需加
-webkit-object-fit: cover - IE 完全不支持，fallback 方案只能用
background-image+background-size，但会丢失alt和 SEO
srcset 和 sizes 不是缩放控制，而是资源选择
写了 srcset 却发现图片还是溢出？那是因为它只管“下载哪张图”，不管“画多大”。渲染尺寸还得靠 CSS 控制。
比如 srcset="small.jpg 480w, large.jpg 1024w"，浏览器选完图之后，照样得靠 max-width: 100% 来限制显示尺寸。
- 没配
sizes的srcset效果打折，尤其在响应式布局中容易加载错尺寸 - 小屏设备可能下大图，浪费带宽；2x 屏可能下 1x 图，模糊
- 基础自适应可不用
srcset；追求性能和清晰度才需要它 - 示例：
<img src="photo.jpg" srcset="photo-480.jpg 480w, photo-1024.jpg 1024w" sizes="(max-width: 480px) 100vw, 50vw">
max-width: 100% 必须有明确参照物，否则就是“100% 的什么？”。很多失效案例，根源不在图片样式本身，而在它上面两层的 <div> 没设宽、用了 display: flex 却忘了 min-width: 0，或者被框架全局样式悄悄覆盖了。 
