HTML - srcset 属性

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

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

语法

<tag srcset="URL">

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

应用于

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

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

HTML srcset 属性示例

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

使用带有“source”元素的 srcset 属性

运行以下代码时，它将在网页上生成包含图像的输出。当用户尝试更改网页宽度时，它会显示另一张图像。

<!DOCTYPE html>
<html>

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

<body>
    <h1 style="color: green;">
        Tutorials<span style="color: black">point</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>

使用带有“img”元素的 srcset 属性

运行以下代码时，它将在网页上生成包含图像的输出。当用户尝试更改网页宽度时，它会显示相同图像的不同尺寸（在 sizes 属性中提供）。

<!DOCTYPE html>
<html>

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

<body>
    <h1 style="color: green;">
        Tutorials <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>

支持的浏览器

属性
srcset	38.0	13.0	38.0	9.1	25.0

html_attributes_reference.htm

打印页面