Атрибут media

Атрибут media определяет медиа-запрос, согласно которому будет выводиться изображение. Работает только внутри элемента <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>

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

Браузеры


9	12	3	15	3.1	3.5


4.4	4	14	2