最直接可靠的方式是给 img 标签设置 width: 100%; height: auto，前提是父容器有可计算宽度；需配合 min-width: 0 解决 flex/grid 中缩放异常，并用 srcset + sizes 实现真正响应式加载。
img 标签加 width: 100%; height: auto; 最直接
这是最常用也最可靠的方式，适用于 <img> 直接放在容器内、且容器本身有明确宽度（比如 max-width: 600px 或 width: 100%）的场景。浏览器会按比例缩放图片，保持宽高比不变。
常见错误是只写 width: 100% 而忽略 height: auto，结果图片被拉伸变形；或者容器没设宽高，导致 100% 失效（比如父元素是 div 默认 display: block 但没设宽，img 的 100% 就无从参考）。
- 确保父容器有可计算的宽度（如
width、max-width、或受 flex/grid 约束） - 给
<img>加display: block可避免底部默认留白（由基线对齐引起） - 如果图片是背景图，就别用
<img>，该走background-size: contain或cover路线
用 object-fit 控制裁剪/填充行为
当容器尺寸固定（比如卡片头像、轮播图占位），而图片原始比例不一致时，width: 100%; height: 100% 配合 object-fit 才能精准控制呈现效果。
object-fit: cover 会等比缩放并裁剪（常用）；object-fit: contain 保证全图可见但可能留白；object-fit: fill 强行拉满（通常要避免）。
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置
width和height（比如height: 200px），否则object-fit不生效 - IE 不支持
object-fit，需要 fallback：用background-image+background-size替代 - 注意
object-position可微调裁剪区域（如object-position: center top）
响应式图片用 srcset + sizes 避免小屏加载大图
自适应不只是“看起来填满”，更是“按需加载”。光靠 CSS 缩放，手机仍会下载桌面尺寸的原图，浪费带宽。
srcset 告诉浏览器有哪些图片资源，sizes 告诉它在不同断点下容器大概多宽，浏览器据此选最合适的源。
<img src="photo-small.jpg"
srcset="photo-small.jpg 480w,
photo-medium.jpg 768w,
photo-large.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 50vw,
33vw"
alt="示例">
-
w单位是图片源的固有宽度（不是显示宽度），必须准确填写 -
sizes中的宽度值是“容器预计占用的视口宽度”，不是 CSS 宽度，也不含单位（vw是唯一合法单位） - 没配
sizes时，浏览器默认按100vw估算，可能导致选错源
Flex/Grid 容器里图片撑开或收缩异常？检查 min-width
在 display: flex 或 grid 布局中，<img> 默认有 min-width: auto，会阻止它缩小到比内容更小——哪怕你写了 width: 100%，也可能卡在原始宽度不动。
解决方法很简单：显式重置 min-width。
- 给图片加
min-width: 0（flex 项）或min-width: 0+min-height: 0（grid 项） - 或者用
flex: 1替代单纯width: 100%，它隐含了收缩能力 - 不要依赖
overflow: hidden来“藏”溢出，那是掩盖问题，不是解决缩放
sizes 的写法和 min-width: 0 的缺失——前者让响应式失效，后者让 flex 布局里的图片在小屏死活缩不下去。 
