Определяет медиа-запрос, согласно которому будет выводиться изображение. Работает только внутри элемента <picture>.
Синтаксис
<picture>
<source media="<медиа-запрос>">
<picture>
Значения
См. Медиа-запросы.
Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>media</title>
</head>
<body>
<picture>
<source srcset="image/mushroom_landscape.jpg" media="screen and (orientation: landscape)">
<source srcset="image/mushroom_portrait.jpg" media="screen and (orientation: portrait)">
<img src="image/mushroom.jpg" alt="">
</picture>
</body>
</html>
В данном примере применяется два изображения — одно отображается при альбомной ориентации экрана, второе при портретной ориентации.
Чтобы заметить эффект на настольном компьютере, достаточно изменить размеры окна браузера, задав ему разные пропорции.
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.