Атрибут Img Srcset не выбирает меньшее изображение

Question

Атрибут <img> element srcset последовательно выбирает больший <img> src, даже если размер медиазапроса равен false.

Использование элемента <picture> для принудительного выбора изображения в соответствии счтобы ширина браузера работала хорошо.Под этим ответом я понимаю, что атрибуты <picture> и <img> srcset работают по-разному, элементы <picture> могут обеспечивать выбор изображения в соответствии с правилами, тогда как <img> srcset предоставляет выбор на усмотрение браузера.,Это может соответствовать плотности пикселей экрана, скорости сети или любой другой логике, которую использует браузер.В ответ я попытался заставить браузер выбрать меньшее изображение, отключив кеш моего браузера Chrome, уменьшив ширину моего браузера почти до 800-пиксельного медиа-запроса (примерно до 300 пикселей, чтобы учесть плотность пикселей моего дисплея в 2 раза),и даже ограничил мое собственное подключение к медленной сети 3g.Тем не менее, Chrome выбрал более крупное изображение размером 800px.

Вот мой элемент <img> до сих пор ...

<img 
    src="/image-2.jpeg" 
    srcset="/image-1.jpeg 800w, /image-2.jpeg 600w" 
    sizes="(min-width: 800px) 800px, 600px"
>

Последовательно /image-1.jpeg используется в качестве атрибута <img> src.

Answer 1

Я вижу только три возможные причины, по которым предоставленный код не работает:

(1).Поддержка браузера.
(2).Расположение файла или несоответствие имени файла.
(3).Размеры изображений, указанные в коде, не соответствуют размеру изображения.

---

Используйте следующий фрагмент кода.Это работает в Firefox для рабочего стола в Windows 10.

Убедитесь, что приведенный ниже фрагмент работает для вашего браузера, когда вы изменяете размер окна браузера.Если это не так, то у нас есть виновник.

Если это сработает, то проверьте следующее:

-> Имена файлов (опечатки)
-> Расширения файлов(.jpeg, .jpg, .png, ...)
-> Расположение изображений (/image-1.jpeg)
-> Размеры изображения (несоответствующий размер) [Это не должно иметь значения]

Если все в порядке, возможно, браузер не имеет доступа к папке, содержащей изображения.Проверьте разрешения и т. Д.

<img src="https://picsum.photos/800/400?image=0"
 srcset="https://picsum.photos/800/400?image=0 800w,
         https://picsum.photos/700/350?image=1 700w,
         https://picsum.photos/600/300?image=2 600w,
         https://picsum.photos/500/250?image=3 500w,
         https://picsum.photos/400/200?image=4 400w,
         https://picsum.photos/300/150?image=5 300w,
         https://picsum.photos/200/100?image=6 200w,
         https://picsum.photos/150/75?image=7 150w,
         https://picsum.photos/100/50?image=8 100w"
 sizes="(min-width: 800px) 800px,
        (min-width: 700px) 700px,
        (min-width: 600px) 600px,
        (min-width: 500px) 500px,
        (min-width: 400px) 400px,
        (min-width: 300px) 300px,
        (min-width: 200px) 200px,
        (min-width: 150px) 150px,
        100px">

Запустите фрагмент кода и измените размер окна браузера.

Или вы можете найти этот код в действии на CodePen .

Надеюсь, это поможет.

Peace ?