HTML <picture> تاج
定义和用法
<picture>
标签让 web 开发人员在指定图像资源时更加灵活。
<picture>
元素最常见的用途是响应式设计中的艺术方向。可以设计多个图像以更好地填充浏览器视口,而不是让一张图像根据视口宽度按比例放大或缩小。
<picture>
元素包含两个标签:一个或多个 标签.
浏览器将查找媒体查询与当前视口宽度匹配的第一个 元素作为
<picture>
元素的最后一个子元素是必需的,用作当没有任何 source 标签匹配时的备用选项。
提示:<picture>
元素的工作方式与 和 类似。您可以设置不同的源,适合首选项的第一个源将被使用。
Kara ƙa:
HTML ƙoyan:HTML <picture> ƙarfi
CSS ƙoyan:CSS ƙarancin yanar girmi - ƙirgizi
Ƙarancin
<picture>
Ƙarancin yanar ƙarancin:
<picture> <source media="(min-width:650px)" srcset="flowers-1.jpg"> <source media="(min-width:465px)" srcset="flowers-2.jpg"> <img src="flowers-3.jpg" alt="Flowers" style="width:auto;"> </picture>
Ƙa'idoji ƙirgiziwa
<picture>
Tajae ƙarancin ta ƙarancin Ƙa'idoji ƙirgiziwa ƙarancin.
Ƙa'idoji ƙarancin
<picture>
Tajae ƙarancin ta ƙarancin Ƙa'idoji ƙarancin HTML.
Ƙirgiziwa ƙarancin
Dabi'un ƙarancin suna nuna ƙirgiziwarsa ta farko ta kwareta ƙarancin.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
38.0 | 13.0 | 38.0 | 9.1 | 25.0 |