Атрибут media до HTML тега <source>

9 червня 2022 р.117

Зміст

<Визначає медіа-запит, згідно з яким виводитиметься зображення. Працює тільки всередині елемента <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>

У цьому прикладі застосовується два зображення — одне відображається при альбомній орієнтації екрана, друге — при портретній орієнтації. Щоб помітити ефект на настільному комп'ютері, достатньо змінити розміри вікна браузера, задавши йому різні пропорції.

-type-text-long field-label-above">

Браузери


9	12	8	10.50	4	15


2	15	11	4

Браузери

У таблиці браузерів застосовуються такі позначення.

— елемент повністю підтримується браузером;
— елемент браузером не сприймається та ігнорується;
— при роботі можлива поява різних помилок, або елемент підтримується з застереженнями.

Кількість вказує версію браузреа, починаючи з якої елемент підтримується.