响应式图片

图片需要同时考虑内容、尺寸、像素密度、方向和带宽。width: 100% 只改变布局尺寸，不会告诉浏览器该下载哪一个资源；srcset、sizes 和 picture 才负责资源选择。

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 40rem) 100vw, 50vw"
  width="1200" height="800"
  alt="山谷中的步道"
>

w 描述候选资源宽度，sizes 描述图片在当前布局中预计占用的 CSS 宽度。不同裁切内容应使用 picture 与 source media，不能用一张被强行压缩的图替代艺术指导。宽高比和尺寸属性还能让浏览器提前保留空间，减少布局位移。

实验与练习

准备 photo-400.jpg、photo-800.jpg、photo-1200.jpg 三个尺寸不同但内容相同的文件，再准备一张窄屏裁切图。打开 Network 面板并限制网络速度，依次在 320px、768px、1440px 视口记录实际请求的资源、图片 CSS 宽度和 CLS 是否发生变化。

可运行微实验：资源选择与艺术指导

<picture>
  <source media="(max-width: 40rem)" srcset="photo-crop-small.jpg">
  <img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w" sizes="(max-width: 40rem) 100vw, 50vw" width="1200" height="800" alt="山谷中的步道">
</picture>

先只改变视口，确认窄屏请求裁切图、宽屏按 sizes 选择候选图；再把 sizes 错写成 100vw，比较下载资源是否变大。关闭图片请求后检查 alt，说明替代文本覆盖的是内容，不是图片文件。

常见错误

• 只用 CSS 缩放大图，却不提供候选资源。
• sizes 与实际布局宽度不一致，导致下载过大或过小图片。
• 用 object-fit: cover 解决裁切，却忘记主体内容可能被截掉。

继续阅读

图片适配了容器，下一篇把文字适配到不同阅读宽度：响应式排版。

练习

1. 用最小输入复现“响应式图片”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案