HTML <img> 标签sizes属性

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

指定不同页面布局的图像大小。
通常和srcset属性一起使用。

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

Edge/IE	Chrome	FireFox	Safari	Opera

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

HTML4.01和HTML5之间的差异

sizes是HTML5的新属性。

<img>标签sizes属性语法

<img>标签sizes属性实例

<!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>标签sizes属性值

属性值	描述
[media query] [length],..	媒体查询来响应图片大小，多个值用逗号隔开。例如：sizes="(max-width: 360px) 340px, 128px"，表示当视区宽度不大于360像素时候，图片的宽度限制为340像素，其他情况下，使用128像素