Различаются ли размеры img в разных браузерах? - PullRequest
Новая
       15

Различаются ли размеры img в разных браузерах?

0 голосов
/ 05 ноября 2018

Я пытаюсь загрузить различное разрешение изображения в соответствии с доступной шириной браузера. Между 0-767 предполагается, что изображение будет загружено на 800 Вт выше, что должно выбирать, какое изображение лучше подходит, в данном случае 1000 Вт. 

<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">

Я пробовал это https://codepen.io/TiagoSousa/pen/YJMdWd/ в разных браузерах (Chrome v.70, Firefox v.63 и v.64.0b6, Safari v.11) в разных SO (Windows 10, OSX v.10.14, Android 8.1 и iOS v.11), и он работает только так, как предполагается в OSX. В других устройствах он всегда загружает изображение на 1000 Вт.

Когда я менял разрешение браузера, я всегда обновлял страницу для принудительной загрузки.

Это что-то, что я делаю неправильно или что-то внешнее по отношению к моему коду?

1 Ответ

0 голосов
/ 05 ноября 2018

Поведение является результатом вашего атрибута размеров. Проверьте это: 

<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

...