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

列印頁面