我正在使用 srcset 的响应式图片和 sizes <img> 中的属性.
我有 3 张图像，具有 3 种不同的尺寸(200x200、400x400、600x600)。我需要针对不同尺寸的视口(viewport)切换它们，如下所示:
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中选择合适的图像。我希望最大宽度为 200x200 的图像:575px 大小，400x400 图像为最大宽度:991px 大小和 600x600 图像为最大宽度:1191px 大小。但对于所有尺寸，只会加载 600x600 图像，不会加载移动图像。我如何解决这个问题？
最佳答案
你知道html5 picture 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>调整浏览器大小以查看不同版本的图片以不同的视口(viewport)大小加载。 浏览器寻找媒体查询与用户当前视口(viewport)宽度匹配的第一个源元素， 并获取 srcset 属性中指定的图像。
img 元素必须作为图片声明 block 的最后一个子标签。 img 元素用于为不支持 picture 元素的浏览器提供向后兼容性，或者如果没有匹配的源标记。
注意:图片元素在 IE12 及更早版本或 Safari 9.0 及更早版本中不受支持。
关于html - sizes 属性不适用于 srcset 中的不同来源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52512564/