Question

我正在使用srcset中sizes和<img>属性的响应图像。我有3种具有3种不同尺寸（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的图像，而不会移位图像。我该如何解决？

Answer 1

您知道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>

调整浏览器的大小，以查看在不同视口大小下加载的图片的不同版本。浏览器会查找媒体查询与用户当前视口宽度匹配的第一个源元素，并获取srcset属性中指定的图像。

img元素是图片声明块的最后一个子标签。 img元素用于为不支持picture元素的浏览器或没有匹配的源标签提供向后兼容性。

注意：在IE12和更早版本或Safari 9.0和更早版本中不支持图片元素。

Answer 2

实际上，图像在移动但没有显示，因为浏览器缓存记录了大图像。它对设备正确响应。我可以通过禁用浏览器缓存来看到它。

size属性不适用于srcset中的其他来源

2 个答案: