HTML <source> srcset屬性用法及代碼示例

HTML srcset屬性用於指定在不同情況下使用的圖像的URL。在<picture>中使用<source>時是必需的

用法:

<source srcset="URL">

屬性值

URL：指定圖片的URL

例：

<!DOCTYPE html> 
  
<html> 
  
<head> 
  
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
  
</head> 
  
<body> 
  
    <picture> 
  
        <source media="(min-width:600px)" 
                srcset= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190328185307/gfg28-300x83.png"> 
  
        <source media="(min-width:400px)" 
                srcset= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350-300x300.png"> 
  
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190521140445/gfglogo2.png" 
             style="width:auto;"> 
  
    </picture> 
  
</body> 
  
</html>

輸出：更改瀏覽器的大小

支持的瀏覽器：下麵列出了HTML video preload屬性支持的瀏覽器

穀歌瀏覽器4.0
Firefox 4.0
蘋果Safari 4.0
Opera 10.5
Edge

相關用法

注：本文由純淨天空篩選整理自shubham_singh大神的英文原創作品 HTML | <source> srcset Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。