前端CSS技巧：如何优雅地实现网页图片自适应显示？
在网页设计中，确保图片能够自适应不同屏幕尺寸和设备类型是非常重要的。本文将介绍几种实现图片自适应显示的方法。
一、使用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:autoaspect-ratio: 2/1;object-fit: cover;object-position: top center; // object-position 属性更改图片剪裁的位置}
二、利用srcset和sizes属性提供自适应图片
srcset 属性允许我们为不同屏幕宽度提供不同分辨率的图片，而 sizes 属性则告诉浏览器如何根据视口大小选择适当的图片。通过这种方式，可以确保无论在桌面还是移动设备上，图片都能以最佳状态显示。
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像素。
工作原理
当与 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像素对应三个物理像素。这类显示器需要更高质量的图像来保证清晰度。
<imgsrc="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，但不能同时使用这两者。
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> 标签。
3.1 使用 <picture> 元素包裹图片：
<picture> 元素允许我们为同一张图片提供多个不同的源文件，这些源文件可以通过不同<source>标签来指定。
3.2 使用 <source> 标签和 srcset 属性：
每个 <source> 标签中包含一个 srcset 属性，该属性定义了一组图片资源，浏览器会根据当前的条件（如屏幕宽度、设备像素比等）选择最合适的资源来显示。
3.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>
这种方法在不同设备和屏幕尺寸下的优势包括：
3.3.1 响应式显示：
能够根据屏幕宽度和设备特性自动选择最合适的图片资源，确保图片在不同设备上都能以最佳状态显示。
3.3.2 提高加载速度：
为不同设备提供不同分辨率的图片，可以减少不必要的数据传输，提高页面加载速度。
3.3.3 节省流量：
移动设备用户可以加载较小分辨率的图片，节省流量消耗。
3.3.4 支持现代图片格式：
可以为支持现代图片格式（如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元素都用于在网页上显示图片，但它们之间存在一些差异：
5.1 用途：
- img元素：用于嵌入图片，并提供了src、alt等属性来定义图片的来源和替代文本。
- picture元素：提供了一种更灵活的方式来为不同的屏幕、设备和带宽条件选择不同的图片。它允许你为同一张图片提供多个源文件，并利用source元素为不同的情况指定不同的源文件。
5.2 可嵌套元素：
- img元素：不能嵌套其他元素。
- picture元素：可以包含一个或多个source元素，以及一个img元素。source元素用于指定图片的多种来源，而img元素用于提供一个默认的图片来源。
5.3 响应式图片：
- img元素：虽然可以通过CSS和srcset属性实现响应式图片，但picture元素提供了更为强大和灵活的控制方式。
- picture元素：允许你为不同的设备条件（如视口宽度、设备像素比等）提供不同的图片来源。
5.4 兼容性：
- img元素：具有很好的浏览器兼容性，几乎所有浏览器都支持。
- picture元素：较新的浏览器支持picture元素，但旧版本的浏览器可能不支持。
小结
通过上述方法，我们可以有效地实现网页中图片的自适应显示，提升用户体验和网页性能。无论是使用CSS控制图片大小和比例，还是通过srcset和sizes属性提供多分辨率图片，亦或是利用picture元素和media查询为不同设备提供最佳图片格式和大小，都是现代网页设计中不可或缺的技术。合理运用这些技术，可以让你的网页在各种设备上都能呈现出色的视觉效果。
来源：sharing pi
