5.1 属性 srcset
自适应图片 在创建响应式和优化的网页中起着重要作用。它们允许根据设备和查看条件加载不同尺寸和分辨率的图片，从而提高性能和用户体验。实现自适应图片的主要工具是 HTML 中的 srcset 和 sizes 属性。
属性 srcset 用于指定具有不同尺寸或分辨率的多个图片来源。浏览器会根据用户设备选择最合适的图片。
语法：
<img src="default.jpg" srcset="image1.jpg 1x, image2.jpg 2x" alt="Example Image">
说明：
src: 指定默认图片的路径srcset: 包含图片及其属性的列表，用逗号分隔-
1x,2x: 表示缩放系数（例如，标准分辨率使用1x，高像素密度设备使用2x）
srcset 使用示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>srcset 使用示例</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
alt="自适应图片示例">
</body>
</html>
代码说明：
src="images/default.jpg": 指定默认图片-
srcset: 包含不同宽度（480w,800w,1200w）的图片列表。浏览器根据视口宽度选择最合适的图片
5.2 属性 sizes
属性 sizes 与 srcset 结合使用，用于指定在不同显示条件下的图片宽度。这允许浏览器更准确地选择合适的图片。
语法：
HTML
<img src="default.jpg"
srcset="image1.jpg 480w, image2.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
alt="Example Image">
说明：
sizes: 包含显示条件和相应图片宽度的列表(max-width: 600px) 480px: 如果视口宽度小于或等于600px，则使用宽度为480px的图片800px: 在其他情况下使用宽度为800px的图片
sizes 使用示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sizes 使用示例</title>
<style>
.responsive-img {
width: 100%;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img
class="responsive-img"
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px"
alt="自适应图片示例">
</body>
</html>
代码说明：
sizes 定义了在不同显示条件下的图片宽度：
- 如果视口宽度小于或等于
600px，使用宽度为480px的图片 - 如果视口宽度小于或等于
900px，使用宽度为800px的图片 - 在其他情况下使用宽度为
1200px的图片
5.3 自适应图片
适用于不同屏幕尺寸的自适应图片
我们将创建一个示例，其中使用 srcset 和 sizes 属性使图片适应不同的屏幕尺寸。
示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应图片</title>
<style>
.responsive-img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img
class="responsive-img"
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px"
alt="自适应图片示例">
</body>
</html>
代码说明：
src="images/default.jpg": 指定默认图片srcset: 定义了三种不同宽度的图片版本（480w,800w,1200w）-
sizes: 为不同条件定义图片宽度：- 小于
600px— 使用宽度为480px的图片 - 小于
900px— 使用宽度为800px的图片 - 大于
900px— 使用宽度为1200px的图片
- 小于
-
.responsive-img: 一个 CSS 样式类，为图片设置宽度100%和自动高度，让它占据可用空间并保持比例
GO TO FULL VERSION