CSS响应式图片

响应式图片根据屏幕尺寸、分辨率自动选择最合适的图片资源，优化加载性能。

CSS 方案

响应式尺寸

CSS

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

背景图片响应式

CSS

.hero {
  background-image: url('small.jpg');
  background-size: cover;
  background-position: center;
}

@media (min-width: 768px) {
  .hero {
    background-image: url('medium.jpg');
  }
}

@media (min-width: 1200px) {
  .hero {
    background-image: url('large.jpg');
  }
}

图片集

CSS

.hero {
  background-image: image-set(
    'small.jpg' 1x,
    'medium.jpg' 2x,
    'large.jpg' 3x
  );
}

HTML 方案

srcset 属性

HTML

<img
  src="small.jpg"
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="响应式图片"
>

属性	说明
`srcset`	图片候选列表（宽度描述符 w 或像素密度描述符 x）
`sizes`	图片预期显示尺寸
`src`	默认/后备图片

picture 元素

HTML

<picture>
  <!-- WebP 格式优先 -->
  <source type="image/webp" srcset="image.webp">
  <!-- 按宽度选择 -->
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <!-- 后备图片 -->
  <img src="small.jpg" alt="响应式图片">
</picture>

像素密度适配

HTML

<img
  src="normal.jpg"
  srcset="normal.jpg 1x, retina.jpg 2x, super.jpg 3x"
  alt="高清图片"
>

art direction 场景

不同设备显示不同裁剪版本：

HTML

<picture>
  <!-- 移动端：竖版裁剪 -->
  <source
    media="(max-width: 767px)"
    srcset="mobile-crop.jpg"
  >
  <!-- 桌面端：横版完整图 -->
  <img src="desktop-full.jpg" alt="产品展示">
</picture>

注意：picture 元素内的 img 必须放在最后作为后备。

要点总结

CSS：max-width: 100% + height: auto 实现基础响应式
HTML：srcset + sizes 让浏览器选择最优资源
picture 元素支持格式选择和 art direction
根据场景选择 CSS 或 HTML 方案