Как задать несколько значений ширины рекламного места

Katie Hempenius
Katie Hempenius
X

Попробовать демоверсию

  • Чтобы посмотреть сайт, нажмите View App (Посмотреть приложение), а затем – Fullscreen (Полноэкранный режим) полноэкранный режим.

  • Перезагрузите приложение в окнах браузера разного размера, чтобы увидеть, как браузер загружает разные изображения и использует разные макеты при разных размерах браузера.

Ознакомьтесь с кодом

  • Посмотрите код, который позволяет это сделать, в index.html:
<img src="flower.jpg"
  srcset="flower-small.jpg 480w, flower-large.jpg 800w"
  sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">

Что здесь происходит?

Значение атрибута sizes определяет, что ширина изображения будет составлять: 100 % от ширины области просмотра, если она не превышает 480 пикселей; 50 % от ширины области просмотра, если она составляет от 481 до 1024 пикселей; 800 пикселей, если ширина области просмотра превышает 1024 пикселя. Эти значения соответствуют ширине, указанной в CSS.

Возможность указать несколько значений ширины рекламного места позволяет использовать разные стили (например, ширину изображений) для разных размеров области просмотра.

Как указать несколько значений ширины рекламного места

  • Чтобы указать несколько значений ширины рекламного места, перечислите их через запятую. Каждый элемент списка, кроме последнего, состоит из медиаусловия (например, max-width или min-width) и ширины рекламного места.
  • Последний элемент в этом списке – ширина рекламного места по умолчанию. Это значение по умолчанию, поэтому указывать условие медиа не нужно.
  • Вы можете указать любое количество значений ширины рекламного места. Количество изображений, указанных в атрибуте srcset, не имеет значения.

  • Ширину рекламного места можно задавать в разных единицах измерения. Допустимые значения ширины:

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

Недопустимая ширина:

  • 25% (в атрибуте sizes нельзя использовать проценты)