图片

固定像素宽度的图片在手机上常会溢出屏幕或压扁变形。响应式图片的目标有两个：随容器缩放不破版、按屏幕选择合适的清晰度不浪费流量。本节从 max-width、srcset/picture、背景图三个层面讲解自适应手段。

让图片跟随容器缩放

一条规则即可覆盖绝大多数 <img> 场景：

img { max-width: 100%; height: auto; }

• max-width: 100%：图片宽度不超过父容器，容器窄就等比缩小。
• height: auto：按原始宽高比自动计算高度，避免拉伸变形。

<img src="photo.jpg" alt="风景照" style="width:300px">
<img src="photo.jpg" alt="风景照" style="width:100%">

效果：第二张图无论容器多宽都等比填满。注意用 100% 固定宽度会“只缩不放”，小图放进大容器会被强行放大而变糊，所以优先使用 max-width。

高清屏与多尺寸：srcset

同一张图，希望手机加载小图省流量、高分屏加载大图更清晰，用 srcset 声明候选图：

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="风景照">

• 400w / 800w / 1200w：候选图片的真实宽度。
• sizes：告诉浏览器图片实际将显示多宽。
• 浏览器综合视口宽度、显示尺寸与网速挑选最合适的一张，无需写任何 JS。

按终端换图：picture 标签

需要“手机竖图、桌面横图”这种不同裁切时，用 <picture> 配合媒体查询换源：

<picture>
  <source media="(max-width: 600px)" srcset="photo-mobile.jpg">
  <img src="photo-desktop.jpg" alt="风景照">
</picture>

效果：宽度不超过 600px 时加载竖版小图，否则加载横版大图。<picture> 只负责“换源”，最终仍由 img 负责显示与缩放，img 上的 alt 等属性依然生效。

背景图的响应式

CSS 背景图片用 background-size 控制铺放方式：

.banner {
    background: url("banner.jpg") center / cover no-repeat;
}

• cover：图片铺满整个容器，超出的部分被裁掉。
• contain：完整显示整张图片，容器比例不符时会留白。

需要背景图随容器伸缩时，cover/contain 远比固定像素值稳健。

小结

响应式图片有三条路：img 上加 max-width:100% 与 height:auto 作通用兜底；srcset/sizes 与 picture 按屏幕选图以省流量保清晰；背景图交给 background-size 的 cover/contain。三者各司其职，组合即可覆盖几乎全部图片场景。