我正在使用srcset中属性sizes和<img>的响应图像。
我有三个不同大小的图像（200x200、400x400、600x600）。我需要为不同大小的视区切换它们，如下所示：
viewport size 1190px -> image size 555px
viewport size 991px -> image size 300px
viewport size 575px -> image size 130px
Any other viewport size -> image size 255px
为此，我编码如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>responsive test</title>
</head>
<body>
<img src="Go-400_x_400.jpg"
srcset="Go-200_x_200.jpg 200w,
Go-400_x_400.jpg 400w,
Go-600_x_600.jpg 600w"
sizes=" (max-width:575px) 131px,
(max-width:991px) 300px,
(max-width:1199px) 555px,
255px"
alt="responsivetest" >
</body>
</html>
作为定义，对于不同的大小，媒体查询应该为每个大小从srcset中选择适当的图像。我希望最大宽度为575px的图像为200x200，最大宽度为991px的图像为400x400，最大宽度为1191px的图像为600x600。但对于所有大小，只有600x600图像将被加载，没有移动图像。我怎么解决这个问题？
最佳答案
你知道html5picture tag吗？
它有助于根据媒体查询和屏幕大小加载备用图像。
<picture>
<source media="(min-width: 650px)" srcset="https://www.w3schools.com/tags/img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="https://www.w3schools.com/tags/img_white_flower.jpg">
<img src="https://www.w3schools.com/tags/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>调整浏览器的大小，以查看以不同的视区大小加载的图片的不同版本。
浏览器查找第一个源元素，其中媒体查询与用户当前的视区宽度匹配，
并获取srcset属性中指定的图像。
img元素是图片声明块的最后一个子标记。
img元素用于为不支持picture元素的浏览器提供向后兼容性，或者如果没有匹配的源标记。
注意：IE12及更早版本或Safari 9.0及更早版本不支持picture元素。
关于html - size属性不适用于srcset中的其他来源，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52512564/