Попробуйте эту демо-версию
Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим
.Перезагрузите приложение в окнах браузера разного размера, чтобы увидеть, как браузер загружает разные изображения и использует разные макеты в разных размерах браузера.
Посмотреть код
- Проверьте
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не имеет значения. Ширина слота может быть указана в различных единицах измерения. Ниже приведены все допустимые ширины:
100px33vw20emcalc(50vw-10px)
Недопустимая ширина:
-
25%(проценты нельзя использовать с атрибутом размеров)