HTML - srcset 属性

HTML srcset 属性用于指定在不同情况（如较小屏幕设备）下要使用的图像的 URL。

换句话说，我们可以说 scrset 属性可用于表示不同的图像，这些图像取决于不同的屏幕尺寸。如果我们想根据设备的屏幕尺寸呈现不同的图像，我们可以使用此标签。

语法


<tag srcset="URL">

其中，“URL”指定图像的 URL。

适用对象

下面列出的元素允许使用 HTML srcset 属性。

元素	描述
<img>	HTML <img> 标签用于将图像嵌入到 HTML 文档中。
<source>	HTML <source> 标签是一个空元素，用于定义各种不同格式的媒体资源，如音频、视频、图片等。

HTML srcset 属性的示例

下面的示例将说明HTML srcset属性，我们应该在哪里以及如何使用此属性！

将 srcset 属性与 “source” 元素一起使用

当我们运行下面的代码时，它将生成一个由网页上的图像组成的输出。当用户尝试更改网页宽度时，它会显示另一个图像。


<!DOCTYPE html>
<html>

<head>
		<title>HTML srcset Attribute</title>
</head>

<body>
		<h1 style="color: green;">
				Qikepu<span style="color: black">com</span>
		<h1>
		<h2>HTML srcset Attribute</h2>
		<picture>
				<source media="(min-width:600px)" width="540"
								height="220" srcset=
"https://images.unsplash.com/photo-1546587348-d12660c30c50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bmF0dXJhbHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80">
				<source media="(min-width:400px)" width="540"
								height="220" srcset=
"https://images.all-free-download.com/images/graphiclarge/beautiful_nature_landscape_05_hd_picture_166223.jpg">
				<img src="https://img.freepik.com/premium-photo/landscape-waterfall_1417-2002.jpg" 
						 style="width:auto;">
		</picture>
</body>

</html>

将 srcset 属性与“img”元素一起使用

当我们运行下面的代码时，它将生成一个由网页上的图像组成的输出。当用户尝试更改网页宽度时，它会显示相同的图像，但在 Sizes 属性中提供了不同的大小。


<!DOCTYPE html>
<html>

<head>
		<title>HTML srcset Attribute</title>
</head>

<body>
		<h1 style="color: green;">
				qikepu <span style="color: black">point</span>
		</h1>
		<h2>HTML srcset Attribute</h2>
		<img srcset=
"https://images.unsplash.com/photo-1546587348-d12660c30c50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bmF0dXJhbHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80 100w,
https://images.unsplash.com/photo-1546587348-d12660c30c50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bmF0dXJhbHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80 300w,
https://images.unsplash.com/photo-1546587348-d12660c30c50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bmF0dXJhbHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80 600w" 
				 sizes="(max-width: 710px) 100px, (max-width: 991px) 300px, 600px">
</body>

</html>

支持的浏览器

浏览器
是否支持	38.0	13.0	38.0	9.1	25.0

打印本页