HTML 元素 <picture>
HTML 元素 <picture> дозволяє відображати різні зображення для різних пристроїв або розмірів екрана.
HTML 元素<picture>
HTML 元素 <picture> надає веб-розробникам більшу гнучкість у визначенні графічних ресурсів.
Елемент <picture> містить один або кілька елементів <source> кожен з яких посилається на різні зображення через атрибут srcset 。 通过这种方式，浏览器可以选择最适合流式观看和/或安装的图像。
皮革元素 <source> має атрибут media який визначає, коли зображення є найбільш підходящим.
屁股
针对不同的屏幕尺寸显示不同的图像：
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
自己尝试一下»
笔记： 首先指定元素<img> як останній дочірній елемент елемента <picture>. Елемент <img> використовується браузерами, які не підтримують елемент <picture> або якщо жоден з тегів <source> не збігається.
如果您选择图像的一个元素
该元素有两个主要用途 <picture>:
1. 无障碍
如果您的屏幕或设备较小，则无需下载大图像文件。 首先浏览 vikoristuvatime <source> елемент із відповідними значеннями атрибутів та ігноруватиме будь-який із наведених нижче елементів.
2. 对格式的支持
某些浏览器或设备可能不支持所有图像格式。 维科主义元素 <picture> ви можете додавати зображення всіх форматів, і браузер використовуватиме перший розпізнаний формат, а також ігноруватиме будь-який із наведених нижче елементів.
屁股
浏览器vikorystuvatime首先识别图像格式：
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="披头士乐队" style="width:auto;">
</picture>
自己尝试一下»
笔记： 浏览器 wikiristuvatime 第一个元素<source> із відповідними значеннями атрибутів та ігнорує будь-які наступні елементи <source>.
HTML 图像标签
| 标签 | 描述 |
|---|---|
| <img> | 图像是什么意思？ |
| <map> | 表示图像映射 |
| <area> | 表示图像地图中间的可点击区域 |
| <picture> | 表示多个图像资源的容器 |
有关所有可用 HTML 标签的完整列表，请访问 HTML 标签浏览器 на нашому сайті W3Schools 乌克兰.
自我控制的营养
- 为什么需要 HTML 元素？
<picture>? - 有多少个元素
<source>може містити в собі елемент<picture>? - 有关哪个属性元素的帮助
<source>посилається на різні зображення? - 属性是什么意思？
mediaкожного елменту<source>?
