Отзывчивый вид Chrome против окна браузера + srcset, размеры

у меня есть этот код

<img
     src="https://dummyimage.com/800x400/000/fff&text=large-src"
     srcset="
     https://dummyimage.com/270x400/000/fff&text=small 270w,
     https://dummyimage.com/650x400/000/fff&text=medium 650w,
     https://dummyimage.com/800x400/000/fff&text=large 800w,
     https://dummyimage.com/1600x400/000/fff&text=xlarge 1600w"
     sizes="100%"  
     alt="test">

Я использую Chrome и отключил кеш в инструментах разработки.

У меня проблема в том, что когда я использую «отзывчивый вид», он ведет себя не так, как ожидалось. Я не вижу обновления изображений или загрузки ожидаемых изображений - даже после жесткого обновления.

Однако, когда я изменяю размер окна, я делаю (однако я не могу проверить x2 таким образом). Что мне не хватает? Есть ли разница с адаптивным видом и srcset/size. Я пропустил ловушку здесь?


google-chrome google-chrome-devtools responsive-images srcset
person Chris    schedule 12.04.2018    source источник
comment
Возможный дубликат запроса @media не работает на мобильных устройствах. Отлично работает в Chrome   -  person Impulse The Fox    schedule 12.04.2018

Ответы (1)


arrow_upward
0
arrow_downward

Со следующим кодом:

<img src="https://via.placeholder.com/100x100"
     srcset="https://via.placeholder.com/100x100 100w,
             https://via.placeholder.com/200x200 200w,
             https://via.placeholder.com/400x400 400w,
             https://via.placeholder.com/800x800 800w"
     sizes="50vw"/>

Кажется, он работает так, как ожидалось:

демонстрация srcset

демонстрация

person Kayce Basques    schedule 12.04.2018