| Kosten | Суббота, 23 Марта 2019, 16:32 | Сообщение 1 |
| Адаптивная революции, которая касается стилистики и дизайна для изображения, стали по немного отставать от основной, так как некоторые изображение нужно так сделать, что все корректно смотрелось на всем мобильных аппаратах. Если говорить про недавнее время обслуживание различных по формату изображений в зависимости от размера экрана или плотности пикселей не было чем-то, что делалось вообще.
Элемент picture показывает, то, что все можно кардинально изменить. Но пока этот элемент не получил широкого распространения, есть два атрибута, которые помогут создавать адаптивные изображения - это srcset и sizes.
Атрибут srcset
Атрибут srcset позволяет обеспечить набор изображений , которые могут быть потенциально служивших в браузере. Мы, как авторы, предоставляем список изображений через запятую, а пользовательский агент определяет, какое изображение отображать в зависимости от особенностей устройства.
1. Путь к файлу изображения
2. Плотность пикселей или ширина изображения
Нужно изначально определить плотность пикселей, мы добавим х к числу плотности для изображения. Например:
Код <img src="Ссылка на изображение" srcset="two.png 2x, three.png 3x, four.png 4x">
Когда атрибут srcset был впервые указан в 2012 году, мы могли предоставлять только изображения с различной плотностью пикселей, как показано выше. Однако в спецификации 2014 года введено значение ширины, которое позволяет нам назначать ширину для разных изображений.
Чтобы определить ширину изображения, мы добавляем w к ширине в пикселях для изображения. Например:
Код <img src="one.png" srcset="two.png 100w, three.png 500w, four.png 1000w">
Атрибут sizes
Атрибут sizes позволяет явно определить размер изображения должен быть в соответствии с набором условий СМИ.
Код <img src="one.png"
srcset="two.png 100w, three.png 500w, four.png 1000w"
sizes="<media condition> <width>,
<media condition> <width>,
<optional default image width>">
Медиа-условие, это не означает, что является медиа-запросом, так как он не позволяет нам указывать типы мультимедиа, например, screen или print, но принимает условие, которое мы обычно добавляем к типу мультимедиа.
Ширина
Указанная ширина может быть практически любым значением длины, например em, rem, пиксели и ширина области просмотра.
Соединение состояния носителя и ширины вместе
Код <img src="one.png"
srcset="two.png 100w, three.png 500w, four.png 1000w"
sizes="(min-width: 900px) 1000px,
(max-width: 900px) and (min-width: 400px) 50em,
( not (orientation: portrait) ) 300px,
( (orientation: landscape) or (min-width: 1000px) ) 50vw,
100vw">
Если условие мультимедиа истинно, пользовательский агент выберет, какое изображение подавать в указанном размере, основываясь на разных изображениях, определенных в srcset атрибуте.
| | Страна: (RU) |
| |
| Kosten | Воскресенье, 24 Марта 2019, 15:23 | Сообщение 2 |
|
| Адаптивные изображения с srcset и размерами
Демонстрация загрузки адаптивного изображения с использованием srcset и размеров.
See the Pen
sizes by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
