RWD 图片

响应式网页设计 (Responsive Web Design) - 图片

使图片具有响应性是响应式网页设计 (RWD) 的基石。这确保图片能适应不同的屏幕尺寸和设备，从而改善用户体验 (user experience) 和性能。

流体图片 (Fluid Images)：max-width: 100%

使图片具有响应性最常用和有效的方法是使用 max-width 属性。

如果 max-width 设置为 100%，当其容器比图片原始宽度窄时，图片会缩小，但它永远不会放大到超过其原始尺寸。这可以防止图片放大时出现像素化 (pixelation)。

img {
  max-width: 100%;
  height: auto; /* Maintain aspect ratio */
  display: block; /* Optional: removes extra space below image if it's an inline element */
}

为什么使用 height: auto;？当你缩放宽度时，设置 height: auto; 可以确保浏览器按比例计算高度，从而保持图片的纵横比 (aspect ratio)。

使用 width: 100% 与 max-width: 100% 的区别

如果你使用 width: 100%;，图片总是会尝试填满其容器宽度的 100%。这意味着它可能会放大超过其原始尺寸（可能导致模糊）或缩小。

img.full-width {
  width: 100%;
  height: auto;
}

通常，为了保持图片质量，更推荐使用 max-width: 100%;。

响应式背景图片

背景图片也可以使用 background-size 属性来实现响应性。

1. background-size: contain;

图片会按比例缩放以适应内容区域，同时保持其纵横比。整个图片将可见，但如果纵横比不匹配，可能会出现空白区域。

.bg-contain {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border: 1px solid red;
}

2. background-size: cover;

图片会按比例缩放以覆盖整个内容区域，同时保持其纵横比。如果纵横比不匹配，图片的部分内容可能会被裁剪。

.bg-cover {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border: 1px solid red;
}

3. background-size: 100% 100%;

图片会被拉伸或收缩以精确填满内容区域，这可能会扭曲其纵横比。

.bg-stretch {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%; /* First value for width, second for height */
  border: 1px solid red;
}

使用 <picture> 和 srcset 实现艺术方向 (Art Direction) 和分辨率切换 (Resolution Switching)

有时，简单地缩放图片是不够的。你可能想显示不同裁剪方式的图片（艺术方向），或者根据屏幕密度或尺寸提供不同分辨率的图片。

使用媒体查询 (Media Queries) 实现响应式背景图片

你可以使用 CSS 媒体查询根据视口 (viewport) 特性来提供不同的背景图片。

/* 默认背景图片（例如，用于较小屏幕）*/
body {
  background-image: url('img_smallflower.jpg');
}

/* 对于宽度为 600px 及以上的屏幕 */
@media only screen and (min-width: 600px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

/* 对于高分辨率 (Retina) 显示器 */
@media only screen and (min-resolution: 192dpi),
       only screen and (-webkit-min-device-pixel-ratio: 2) {
  body {
    /* 如果有更高分辨率的背景图片，则使用它 */
    background-image: url('img_flowers_high_res.jpg');
  }
}

HTML5 <picture> 元素

<picture> 元素为响应式图片直接在 HTML 中提供了一个更强大的解决方案。它允许你为一个图片声明多个源 (sources)，浏览器会选择最合适的那个。

现代浏览器普遍支持 <picture> 元素。

元素	当前支持	Chrome	Firefox	Edge (曾是 IE)	Safari	Opera
	广泛支持	38.0+	38.0+	广泛支持 (Edge)	9.1+	25.0+

<picture> 示例：

<picture>
  <!-- 在宽度小于 600px 的屏幕上显示 small_image.jpg -->
  <source media="(max-width: 599px)" srcset="small_image.jpg">
  <!-- 在宽度 600px 到 999px 的屏幕上显示 medium_image.jpg -->
  <source media="(min-width: 600px) and (max-width: 999px)" srcset="medium_image.jpg">
  <!-- 在宽度 1000px 或更宽的屏幕上显示 large_image.jpg -->
  <source media="(min-width: 1000px)" srcset="large_image.jpg">
  <!-- 不支持 <picture> 的浏览器或没有源匹配时的回退 -->
  <img src="default_image.jpg" alt="描述性替换文本">
</picture>

关键属性：

• <source>：指定不同的图片源。
• media：一个媒体查询，用于确定何时应考虑某个特定的源。
• srcset：指定要使用的图片 URL。也可用于分辨率切换（例如，srcset="image.jpg 1x, image-2x.jpg 2x"）。
• <img>：这是对不支持 <picture> 的浏览器的必需回退 (fallback)，也提供了 alt 文本。

在 <img> 上使用 srcset 和 sizes 进行分辨率切换

对于不涉及完整艺术方向，仅基于视口宽度进行分辨率切换或提供不同尺寸图片的情况，你可以直接在 <img> 标签上使用 srcset 和 sizes 属性。

<img srcset="image-480w.jpg 480w,
             image-800w.jpg 800w,
             image-1200w.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1000px) 800px,
            1200px"
     src="fallback-image.jpg"
     alt="一个响应式图片示例">

srcset 提供了一个图片 URL 列表及其固有宽度（例如，480w）。

sizes 告诉浏览器在不同的视口宽度下图片将显示多宽。这有助于浏览器从 srcset 中选择最合适的图片。