Указание ширины нескольких слотов

Katie Hempenius

Попробуйте эту демо-версию

• Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .

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

Посмотреть код

• Проверьте 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% (проценты нельзя использовать с атрибутом размеров)