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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。