Отзывчивые полноразмерные изображения и srcset

У меня есть сайт, на котором мне нужны полноразмерные изображения (они будут обрезаны по вертикали для эффекта параллакса). Я хочу, чтобы я прочитал кучу статей о srcset и sizes и попробовал несколько вещей, но я не могу понять (а) нужно ли мне вообще использовать размеры, и (б) особенно без sizes, как Браузер сам выберет, какое изображение загрузить.

Для конкретности вот спецификация изображения:

<img src="/images/full/2c8n.jpg" srcset="
  /images/320/2c8n.jpg 320w,
  /images/640/2c8n.jpg 640w,
  /images/1024/2c8n.jpg 1024w,
  /images/full/2c8n.jpg">

Это находится в контейнере div полной ширины, поэтому изображение должно идти от края до края.

Я бы хотел, чтобы он загружал самый маленький на мобильных устройствах и самый большой (/images/full) на больших настольных компьютерах, но, похоже, этого не происходит. Я видел, что также можно использовать стиль x, но я не уверен, как выбрать, какое изображение использовать с каждым коэффициентом масштабирования, если это вообще правильный способ сделать это. Любая идея, что я делаю неправильно и как правильно это сделать?


image html responsive-images srcset
person GaryO    schedule 24.11.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Документация довольно неясна в отношении атрибута sizes. Что я смог определить, так это то, что это влияет только на размер изображения для рендеринга, а НЕ на выбор изображения. Итак, sizes="(max-width: 500px) 50vw, 100vw" сообщает браузеру:

  1. если область просмотра имеет ширину до 500 пикселей, визуализируйте изображение на 50% области просмотра (50vw)
  2. если область просмотра 501px или больше, визуализируйте изображение на 100% области просмотра (100vw)

Для атрибута srcset браузер просматривает ваш список изображений, угадывает, какой размер слота он должен заполнить, а затем выбирает следующий размер. Итак, от края до края в соответствии с вашими требованиями, вот как он будет выбирать, какой файл использовать:

  1. Ширина области просмотра до 319px -> /images/320/2c8n.jpg
  2. VW от 320 до 639 пикселей -> /images/640/2c8n.jpg
  3. От VW 640 до 1023 -> /images/1024/2c8n.jpg
  4. VW 1024 и больше -› /images/full/2c8n.jpg

Я также читал, но еще не проверял, что он использует первое найденное изображение, которое соответствует требованиям между тегами src и srcset. Порядок атрибутов может иметь значение. Опять же, читал, но не проверял.

person Fongers    schedule 01.12.2020