HTML <img> 标签srcset属性

<img>标签srcset属性定义和用法

指定要在不同情况下使用的图像的URL。
通常与sizes属性一起使用。

<img>标签srcset属性浏览器支持

Edge/IE	Chrome	FireFox	Safari	Opera

IE不支持Edge16（含）以上	34.0（含）以上	38.0（含）以上	7.1（含）以上	21.0（含）以上

HTML4.01和HTML5之间的差异

srcset是HTML5的新属性。

<img>标签srcset属性语法

<img>标签srcset属性实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<img src="/images/fj1.jpg"   
srcset="/images/fj1.jpg 128w, /images/fj2.jpg 256w, /images/fj3.jpg 512w"  
sizes="(max-width: 360px) 340px, 128px"
     />
</body>
</html>

尝试一下

<img>标签srcset属性值

属性值	描述
URL sizew,URL sizew,.....	图像的URL和宽度（像素）的集合。多个子集之间用逗号相隔可能的值：绝对URL - 指向另一个网站的图片（如srcset =“http://www.example.com/image.gif 128w,xxx.com/img2.gif 256w”）相对URL - 指向网站中的文件（如srcset =“image.gif 128w,img2.gif 256w”）