“HTML picture 标签”的版本间差异

2022年8月4日 (四) 21:40的最新版本

<picture> 元素允许您为不同的设备或屏幕尺寸显示不同的图片。

HTML <picture> 元素

HTML <picture> 元素使 Web 开发人员在指定图像资源方面具有更大的灵活性。

<picture> 元素包含一个或多个元素，每个元素通过属性 <source> 引用不同的图像。 srcset 这样浏览器可以选择最适合当前视图和/或设备的图像。

每个 <source> 元素都有一个 media 属性，用于定义图像何时最合适。

示例

为不同的屏幕尺寸显示不同的图像：

<picture>  
<source media="(min-width: 650px)" srcset="/image.php?w=650&h=500"> 
  <source media="(min-width: 465px)" srcset="/image.php?w=464&h=500"> 
 <img src="/image.php?w=100&h=500">
</picture>

注意：始终将元素指定 <img> 元素为的最后一个子 <picture> 元素。该 <img> 元素由不支持该 <picture> 元素的浏览器使用，或者如果没有任何 <source> 标签匹配。

什么时候使用图片元素

该元素有两个主要用途 <picture> ：

设备尺寸

如果您的屏幕或设备较小，则无需加载大图像文件。浏览器将使用 <source> 具有匹配属性值的第一个元素，并忽略其他元素。

格式支持

某些浏览器或设备可能不支持所有图像格式。通过使用该 <picture> 元素，您可以添加所有格式的图像，浏览器将使用它识别的第一种格式，并忽略其他元素。

示例

浏览器将使用它识别的第一个图像格式：

<picture> 
  <source srcset="/image.php?w=303&h=500&type=png"> 
  <source srcset="/image.php?w=302&h=500&type=gif"> 
  <img src="/image.php?w=301&h=500&type=png"  style="width:auto;">
</picture>

注意：浏览器将使用 <source> 具有匹配属性值的第一个元素，并忽略任何后续 <source> 元素。

@@ 第1行： / 第1行： @@
+[[Category:HTML教程|21]]
 ''' <nowiki><picture></nowiki> '''元素允许您为不同的设备或屏幕尺寸显示不同的图片。
@@ 第9行： / 第10行： @@
 每个''' <nowiki><source></nowiki> '''元素都有一个 ''' <nowiki>media</nowiki> '''属性，用于定义图像何时最合适。
-<sample title="" hererun="s" desc="为不同的屏幕尺寸显示不同的图像：" > <picture>  <source media="(min-width: 650px)" srcset="/favicon.ico">   <source media="(min-width: 465px)" srcset="/favicon.ico">  <img src="/favicon.ico"></picture> </sample>
+<sample title="" hererun="s" desc="为不同的屏幕尺寸显示不同的图像：" >
-注意：始终将元素指定为''' <nowiki><img></nowiki> '''元素的最后一个子''' <nowiki><picture></nowiki> '''元素。该''' <nowiki><img></nowiki> '''元素由不支持该''' <nowiki><picture></nowiki> '''元素的浏览器使用，或者如果没有任何''' <nowiki><source></nowiki> '''标签匹配。
+ <picture>
+<source media="(min-width: 650px)" srcset="/image.php?w=650&h=500">
+   <source media="(min-width: 465px)" srcset="/image.php?w=464&h=500">
+  <img src="/image.php?w=100&h=500">
+</picture>
+</sample>
+注意：始终将元素指定''' <nowiki><img></nowiki> '''元素为的最后一个子''' <nowiki><picture></nowiki> '''元素。该''' <nowiki><img></nowiki> '''元素由不支持该''' <nowiki><picture></nowiki> '''元素的浏览器使用，或者如果没有任何''' <nowiki><source></nowiki> '''标签匹配。
 ==什么时候使用图片元素==
 该元素有两个主要用途''' <nowiki><picture></nowiki> '''：
-=== 1. 热量===
+=== 设备尺寸 ===
-如果您的屏幕或设备较小，则无需加载大图像文件。浏览器将使用''' <nowiki><source></nowiki> ''' 具有匹配属性值的第一个元素，并忽略以下任何元素。
+如果您的屏幕或设备较小，则无需加载大图像文件。浏览器将使用''' <nowiki><source></nowiki> ''' 具有匹配属性值的第一个元素，并忽略其他元素。
-=== 2.格式支持===
-某些浏览器或设备可能不支持所有图像格式。通过使用该 ''' <nowiki><picture></nowiki> '''元素，您可以添加所有格式的图像，浏览器将使用它识别的第一种格式，并忽略以下任何元素。
-<sample title="" hererun="s" desc="浏览器将使用它识别的第一个图像格式：" > <picture>  <source srcset="img_avatar.png">   <source srcset="/favicon.ico">   <img src="/favicon.ico" alt="Beatles" style="width:auto;"></picture> </sample>
+=== 格式支持===
+某些浏览器或设备可能不支持所有图像格式。通过使用该 ''' <nowiki><picture></nowiki> '''元素，您可以添加所有格式的图像，浏览器将使用它识别的第一种格式，并忽略其他元素。
+<sample title="" hererun="s" desc="浏览器将使用它识别的第一个图像格式：" >
+<picture>
+  <source srcset="/image.php?w=303&h=500&type=png">
+   <source srcset="/image.php?w=302&h=500&type=gif">
+   <img src="/image.php?w=301&h=500&type=png"  style="width:auto;">
+</picture> </sample>
 注意：浏览器将使用''' <nowiki><source></nowiki> '''具有匹配属性值的第一个元素，并忽略任何后续''' <nowiki><source></nowiki> '''元素。