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

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