Атрибут media

Определяет медиа-запрос, согласно которому будет выводиться изображение. Работает только внутри элемента <picture>.

Синтаксис

<picture>
  <source media="<медиа-запрос>">
<picture>

Значения

Пример

<!DOCTYPE html> <html> <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>

В данном примере применяется два изображения — одно отображается при альбомной ориентации экрана, второе при портретной ориентации. Чтобы заметить эффект на настольном компьютере, достаточно изменить размеры окна браузера, задав ему разные пропорции.

Браузеры

9 12 8 10.50 4 15
2 15 11 4

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 08.11.2016
Редакторы: Влад Мержевич