最简方案是img{width:100%;height:auto;}，需父容器有明确宽度；固定容器用object-fit控制裁剪/填充；响应式用srcset+sizes；Flex/Grid中需设min-width:0防不缩放。
img 标签加 width: 100%; height: auto; 是最简方案
绝大多数场景下，只需给 <img> 设置这两条 CSS 规则，图片就能随容器宽度缩放、保持宽高比。前提是父容器有明确宽度（比如设置了 width、max-width，或处于 flex/grid 布局中）。
常见错误是只写 width: 100% 却漏掉 height: auto，结果图片被强行拉伸变形；或者父容器本身宽度为 auto（如未设宽的 <div>），导致图片按原始尺寸渲染，不触发缩放。
- 推荐写法：
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 - 示例：
<div style="width: 200px; height: 150px; overflow: hidden;"> <img src="photo.jpg" style="width: 100%; height: 100%; object-fit: cover;"> </div>
响应式图片用 <picture> + srcset 避免大图小屏加载
“自适应”不只是尺寸变化，还包括根据设备像素比和视口宽度加载合适分辨率的图片。单靠 CSS 缩放会让手机下载桌面尺寸的大图，浪费带宽。
srcset 指定多套资源，sizes 告诉浏览器不同断点下容器大概多宽，由浏览器自主选择最优图片。
-
srcset中的宽度描述符（如400w）指图片源文件的原始像素宽度 -
sizes="(max-width: 768px) 100vw, 50vw"表示：小屏时图片占满视口宽，大屏时占一半 - 必须保留
src作为兜底（不支持srcset的老浏览器会 fallback 到它） - 示例：
<img src="photo-small.jpg" srcset="photo-small.jpg 400w, photo-medium.jpg 800w, photo-large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw" alt="示例图">
Flex/Grid 容器中图片不收缩？检查 min-width: auto
在 display: flex 或 display: grid 的父容器里，<img> 默认有 min-width: auto，会阻止它压缩到比原始尺寸更小——即使你写了 width: 100%。
解决方法是显式覆盖：min-width: 0（flex 项）或 min-width: 0 + min-height: 0（grid 项），让 CSS 缩放规则真正生效。
- Flex 场景下加：
img { width: 100%; height: auto; min-width: 0; } - Grid 场景同理，且建议同时设
min-height: 0防止高度撑开 - 这个行为在 Chrome/Firefox 中一致，但容易被忽略，导致“明明写了 100% 却不缩放”的困惑
