Подскажите, почему не корректно работают "отзывчивые" изображения, если использовать их через srcset
и sizes
в теге img
.
Проблема в примере ниже: здесь всегда загружается изображение с именем файла mushroom_landscape.jpg
независимо от разрешения экрана:
<img
src="https://webref.ru/example/image/mushroom.jpg"
srcset="https://webref.ru/example/image/mushroom_portrait.jpg 350w, https://webref.ru/example/image/mushroom_landscape.jpg 650w"
sizes="(max-width: 600px) 350px, (min-width: 601px) 650px"
alt="test">
В атрибуте sizes
я указал условия при которых должна меняться ширина изображения в зависимости от ширины экрана. Меняя размер экрана я вижу, что ширина слота меняется: когда ширина экрана меньше 600px - ширина слота - 350px, больше 601px - изображение впишится в ширину слота 650px.
В описании написано, что браузер должен самостоятельно выбрать максимально подходящие изображения, ссылки на которые указаны в атрибуте srcset
. В моем случае, если ширина экрана меньше 600px ширина слота изображения должна стать 350px. Следовательно в этот слот браузер должен добавить изображение максимально близкое к этим размерам.
В атрибуте srcset
я указал ссылку на картинку и ее размер 350w
. Однако браузер игнорирует и не зависимо от размеров экрана ничего не меняет(остается изображение mushroom_landscape.jpg
).
Почему? Что я делаю не так?(браузер Google Chrome, Safari, FireFox. КЭШ чистил)
А здесь работают корректно:
<picture>
<source media="(max-width: 600px)" srcset="https://webref.ru/example/image/mushroom_portrait.jpg">
<source media="(min-width: 601)" srcset="https://webref.ru/example/image/mushroom_landscape.jpg">
<img src="https://webref.ru/example/image/mushroom.jpg" alt="test">
</picture>