Question

我正在尝试根据浏览器的可用宽度加载不同的图像分辨率。在0-767之间，应该加载800w以上的图像，然后再选择适合的图像（在这种情况下为1000w）。

<img src="https://dummyimage.com/20x20"
     srcset="https://dummyimage.com/350x466 350w,
            https://dummyimage.com/400x533 400w, 
            https://dummyimage.com/800x1067 800w, 
            https://dummyimage.com/1000x1334 1000w"
     sizes="(max-width: 767px) 800px"
     alt="Responsive Image Test">

我在不同的浏览器（Windows 10，OSX v.10.14，Android 8.1和Android）以及其他浏览器（Chrome v.70，Firefox v.63和v.64.0b6，Safari v.11）中尝试了此https://codepen.io/TiagoSousa/pen/YJMdWd/ iOS v.11），并且只能在OSX中使用。在其他设备上，它将始终以1000w加载图像。

更改浏览器分辨率时，我总是刷新页面以强制加载。

这是我做错了还是代码之外的东西？

Answer 1

该行为是您的sizes属性的结果。看看这个：

<img src="https://dummyimage.com/20x20" srcset="https://dummyimage.com/350x466 350w, https://dummyimage.com/400x533 400w, https://dummyimage.com/800x1067 800w, https://dummyimage.com/1000x1334 1000w" alt="Responsive Image Test">

当视口的宽度为图片宽度时，图片会自动更改。但是您已经将其限制在一个媒体查询上。

更多信息：

https://bitsofco.de/the-srcset-and-sizes-attributes/

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

img的大小在不同的浏览器中是否具有不同的行为？

1 个答案: