实现网页中图片的自适应显示方法

在网页设计中，确保图片能够自适应不同屏幕尺寸和设备类型是非常重要的。本文将介绍几种实现图片自适应显示的方法。

一、使用CSS属性控制图片大小和比例

通过设置 max-inline-size: 100% 和 block-size: auto ，可以让图片根据容器宽度自动调整大小，同时保持原有的宽高比。此外， aspect-ratio 属性可以用来指定图片的宽高比， object-fit: cover 和 object-position 属性则可以控制图片的裁剪位置和方式。

自适应图片 css

img {
  max-inline-size: 100%; /* 相当于默认书写模式下的：max-width:100% */
  block-size: auto; /* 浏览器在调整图片大小时会保留图片的宽高比。相当于默认书写模式下的 width:auto */
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center; /* object-position 属性更改图片剪裁的位置 */
}

二、利用srcset和sizes属性提供自适应图片

srcset 属性允许我们为不同屏幕宽度提供不同分辨率的图片，而 sizes 属性则告诉浏览器如何根据视口大小选择适当的图片。通过这种方式，可以确保无论在桌面还是移动设备上，图片都能以最佳状态显示。

2.1 srcset的自适应图片

用以英文逗号 , 分隔的值列表定义 srcset。每个值都是图片的网址，后跟一个空格，然后是关于图片的一些元数据，称为“描述符”。

宽度描述符 w。
像素密度描述符 x。

如果您使用的是宽度描述符，则还必须使用 sizes 属性为浏览器提供更多信息。

srcset 定义了不同宽度的图片资源。
sizes 告诉浏览器在不同条件下应使用多宽的图片。
浏览器会自动选择最合适的图片加载，提升性能和显示效果。

示例一：宽度描述符 w

在HTML图像标签的 srcset 属性中，480w、800w、1200w中的 w 是宽度描述符(Width Descriptor)，用于指定图像的原始宽度（以像素为单位）。

宽度描述符的含义

480w：表示 small.jpg 图像的原始宽度是480像素。
800w：表示 medium.jpg 图像的原始宽度是800像素。
1200w：表示 large.jpg 图像的原始宽度是1200像素。

2.2 工作原理

当与 sizes 属性结合使用时，浏览器会根据以下步骤选择最合适的图像：

首先，浏览器根据 sizes 属性计算出图像在当前视口下应该占据的实际宽度
然后，浏览器将这个计算出的宽度与 srcset 中提供的图像宽度进行比较
最后，选择最合适的图像（通常是刚好大于或等于所需宽度的图像）

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

sizes属性解析

当视口宽度≤480px时，图像将占据100%的视口宽度
当视口宽度在481px到800px之间时，图像将占据50%的视口宽度
当视口宽度>800px时，图像将占据25%的视口宽度

sizes="(max-width: 480px) 100vw, (max-width: 800px) 50vw, 25vw"

示例二：像素密度描述符 x

在HTML图像标签的 srcset 属性中，1x、2x、3x 这些值被称为 设备像素比(Device Pixel Ratio, DPR) 的描述符，用于支持不同分辨率的显示设备。

1x：表示标准分辨率显示器，即一个CSS像素对应一个物理像素。这是最基本的分辨率级别。
2x：表示高分辨率显示器（如Retina显示器），一个CSS像素对应两个物理像素。这类显示器需要更高清晰度的图像。
3x：表示超高分辨率显示器，一个CSS像素对应三个物理像素。这类显示器需要更高质量的图像来保证清晰度。

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

说明

在普通显示器上，浏览器会加载 small-image.png。
在Retina或其他2倍分辨率显示器上，浏览器会加载 medium-image.png。
在3倍分辨率显示器上，浏览器会加载 large-image.png。

注意：您可以使用宽度描述符 w 或密度描述符 x，但不能同时使用这两者。

2.3 source.src 和 source.srcset的异同

src

用于指定单一的媒体资源。
当浏览器解析到<source>元素时，它会使用 src 属性指定的资源。
通常用于提供一个默认的媒体资源，以便在没有其他条件匹配的情况下使用。

<picture>
     <source src="../../images/Yati_head.webp" type="image/webp">
     <source src="../../images/Yati_head.png" type="image/png">
     <img width="102" height="102" src="../../images//Yati_head.png" alt="Yati" title="Yati" loading="lazy">
</picture>

srcset

用于指定一组媒体资源，浏览器会根据当前的条件（如屏幕宽度、设备像素比等）选择最合适的资源来显示。
允许为不同的显示条件提供多个资源选项，使得网页能够更加响应式地适应不同的设备和屏幕尺寸。
常用于响应式图片的场景，以便在不同设备上提供最佳的视觉效果和加载速度。

<picture>
    <source srcset="../../images/topic/Yati_head.webp" type="image/webp">
    <source srcset="../../images/topic/Yati_head.png" type="image/png">
    <img width="102" height="102" src="../../images/Yati_head.png" alt="Yati" title="Yati" loading="lazy">
</picture>

三、使用picture元素和media查询

当需要为不同屏幕显示不同构图的图片时，可使用 <picture> 元素结合 <source> 标签。

1. 使用 <picture> 元素包裹图片：

<picture> 元素允许我们为同一张图片提供多个不同的源文件，这些源文件可以通过不同<source>标签来指定。

2. 使用 <source> 标签和 srcset 属性：

每个 <source> 标签中包含一个 srcset 属性，该属性定义了一组图片资源，浏览器会根据当前的条件（如屏幕宽度、设备像素比等）选择最合适的资源来显示。

3. 结合媒体查询：

在 <source> 标签中使用 media 属性来指定媒体查询条件。例如， (min-width: 800px) 表示屏幕宽度至少为800像素时，浏览器会选择 srcset 中定义的图片资源。

<picture>
  <source media="(max-width: 600px)" srcset="mobile-crop.jpg">
  <source media="(max-width: 1000px)" srcset="tablet-crop.jpg">
  <img src="desktop.jpg" alt="自适应图片">
</picture>

这种方法在不同设备和屏幕尺寸下的优势包括：

响应式显示：

能够根据屏幕宽度和设备特性自动选择最合适的图片资源，确保图片在不同设备上都能以最佳状态显示。

提高加载速度：

为不同设备提供不同分辨率的图片，可以减少不必要的数据传输，提高页面加载速度。

节省流量：

移动设备用户可以加载较小分辨率的图片，节省流量消耗。

支持现代图片格式：

可以为支持现代图片格式（如WebP）的浏览器提供更高效的图片格式，同时为不支持这些格式的浏览器提供回退选项（如JPEG或PNG）。

四、使用CSS背景图与媒体查询

对于作为背景的图片，可使用CSS背景属性结合媒体查询实现自适应。

.hero {
  background-image: url('large-bg.jpg');
  background-size: cover;
  background-position: center;
  height: 500px;
}

@media (max-width: 768px) {
  .hero {
    background-image: url('mobile-bg.jpg');
    height: 300px;
  }
}

五、比较img和picture元素

在HTML中，img 和 picture 元素都用于在网页上显示图片，但它们之间存在一些差异：

1. 用途：

img元素：用于嵌入图片，并提供了src、alt等属性来定义图片的来源和替代文本。
picture元素：提供了一种更灵活的方式来为不同的屏幕、设备和带宽条件选择不同的图片。它允许你为同一张图片提供多个源文件，并利用source元素为不同的情况指定不同的源文件。

2. 可嵌套元素：

img元素：不能嵌套其他元素。
picture元素：可以包含一个或多个source元素，以及一个img元素。source元素用于指定图片的多种来源，而img元素用于提供一个默认的图片来源。

3. 响应式图片：

img元素：虽然可以通过CSS和srcset属性实现响应式图片，但picture元素提供了更为强大和灵活的控制方式。
picture元素：允许你为不同的设备条件（如视口宽度、设备像素比等）提供不同的图片来源。

4. 兼容性：

img元素：具有很好的浏览器兼容性，几乎所有浏览器都支持。
picture元素：较新的浏览器支持picture元素，但旧版本的浏览器可能不支持。

总结

通过上述方法，我们可以有效地实现网页中图片的自适应显示，提升用户体验和网页性能。无论是使用CSS控制图片大小和比例，还是通过srcset和sizes属性提供多分辨率图片，亦或是利用picture元素和media查询为不同设备提供最佳图片格式和大小，都是现代网页设计中不可或缺的技术。合理运用这些技术，可以让你的网页在各种设备上都能呈现出色的视觉效果。