最简方案是img{width:100%;height:auto;}，需父容器有明确宽度；固定容器用object-fit控制裁剪/填充；响应式用srcset+sizes；Flex/Grid中需设min-width:0防不缩放。
img 标签加 width: 100%; height: auto; 是最简方案
绝大多数场景下，只需给 width、max-width，或处于 flex/grid 布局中）。
常见错误是只写 当容器尺寸固定（比如卡片头像、轮播图占位框），而图片原始比例不一致时， 立即学习“前端免费学习笔记（深入）”； “自适应”不只是尺寸变化，还包括根据设备像素比和视口宽度加载合适分辨率的图片。单靠 CSS 缩放会让手机下载桌面尺寸的大图，浪费带宽。 在 解决方法是显式覆盖：width: 100% 却漏掉 height: auto，结果图片被强行拉伸变形；或者父容器本身宽度为 auto（如未设宽的
img {
width: 100%;
height: auto;
}max-width: 100% 更稳妥（尤其在响应式布局中）img 设固定 height 或 min-height，会破坏比例用
object-fit 控制图片在固定容器内的裁剪/填充方式width: 100%; height: 100% 会导致拉伸。此时要用 object-fit 配合显式宽高。object-fit: cover 最常用：等比缩放并裁剪，填满整个容器；object-fit: contain 则完整显示图片，留白。
width 和 height（或 aspect-ratio），否则 object-fit 不生效object-fit 在 IE 中完全不支持，iOS Safari 早期版本有 bug响应式图片用
srcset 避免大图小屏加载srcset 指定多套资源，sizes 告诉浏览器不同断点下容器大概多宽，由浏览器自主选择最优图片。
srcset 中的宽度描述符（如 400w）指图片源文件的原始像素宽度sizes="(max-width: 768px) 100vw, 50vw" 表示：小屏时图片占满视口宽，大屏时占一半src 作为兜底（不支持 srcset 的老浏览器会 fallback 到它）@@##@@
Flex/Grid 容器中图片不收缩？检查
min-width: auto
display: flex 或 display: grid 的父容器里，
min-width: auto，会阻止它压缩到比原始尺寸更小——即使你写了 width: 100%。min-width: 0（flex 项）或 min-width: 0 + min-height: 0（grid 项），让 CSS 缩放规则真正生效。
弹性不是靠一个属性实现的，而是 CSS 尺寸模型、布局上下文、响应式语法共同作用的结果。最容易卡住的地方，往往不是写错某行代码，而是没意识到父容器的宽度来源、或浏览器对内联替换元素的默认约束。img {
width: 100%;
height: auto;
min-width: 0;
}min-height: 0 防止高度撑开
