Pull to refresh

Comments 11

Я поэкспериментировал в Firefox и получил следующие результаты:

  1. При отсутствии sizes браузер выбирает первое изображение которое шире окна.

  2. При наличии sizes браузер выбирает изображение шире заданного размера.

<img
  src="bears-1920x1080.jpg"
  alt="bears"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 960px, 100vw"
  srcset="
    bears-480x270.jpg    480w,
    bears-960x540.jpg    960w,
    bears-1920x1080.jpg 1920w
  "
/>

Тобиж по крайней мере в Firefox картинка bears-480x270.jpg в этом примере не будет показана никогда.

Протестировал в Firefox 91.0 (Mozilla Firefox for Ubuntu). Работает также, как описано в статье.

Это исходная статья, просто она находилась 5 дней на модерации.

Заметил такую странность - если изменять ширину окна, пройдя через все описанные в sizes брекпойнты, то браузер сначала выбирает изображения согласно описанным правилам, но в итоге найдет максимальную ширину изображения из sizes и будет применять только эту ширину изображения, игнорируя дальнейшие изменения ширины окна. То есть правила брекпойнтов из sizes перестают действовать.

Хотя в спецификации о таком поведении нигде не написано.

В каком браузере такое поведение? В Firefox 91.0.2 у меня при сужении окна браузер выбирает картинку меньше.

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

Вот я выше делал тестовую страницу. Сколько я бы её не менял по ширине туда и обратно Firefox меняет изображения согласно заданному sizes.

Проверил - фокс ведет себя адекватно, а вот хром всегда выдает изображение 1920w. И еще странность - если просто изменять размер окна, то медиазапрос он отображает верно, а если включить режим эмуляции мобильного устройства и там изменять ширину области, то медиа ниже 1200 он тоже не отрабатывает.

В общем с хромом что то неладно.

Sign up to leave a comment.

Articles