Атрибут 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> 

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

Браузеры ?

Браузеры

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

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

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

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

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