“HTML picture 标签”的版本间差异
本页内容
无编辑摘要 |
|||
(未显示同一用户的8个中间版本) | |||
第1行: | 第1行: | ||
[[Category:HTML教程|21]] | |||
''' <nowiki><picture></nowiki> '''元素允许您为不同的设备或屏幕尺寸显示不同的图片。 | ''' <nowiki><picture></nowiki> '''元素允许您为不同的设备或屏幕尺寸显示不同的图片。 | ||
== HTML <picture> 元素 == | == HTML <nowiki><picture></nowiki> 元素 == | ||
HTML''' <nowiki><picture></nowiki> '''元素使 Web 开发人员在指定图像资源方面具有更大的灵活性。 | HTML''' <nowiki><picture></nowiki> '''元素使 Web 开发人员在指定图像资源方面具有更大的灵活性。 | ||
第9行: | 第10行: | ||
每个''' <nowiki><source></nowiki> '''元素都有一个 ''' <nowiki>media</nowiki> '''属性,用于定义图像何时最合适。 | 每个''' <nowiki><source></nowiki> '''元素都有一个 ''' <nowiki>media</nowiki> '''属性,用于定义图像何时最合适。 | ||
<sample title="" hererun="s" desc="为不同的屏幕尺寸显示不同的图像:" > <picture> <source media="(min-width: 650px)" srcset="/ | <sample title="" hererun="s" desc="为不同的屏幕尺寸显示不同的图像:" > | ||
<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> ''': | 该元素有两个主要用途''' <nowiki><picture></nowiki> ''': | ||
=== | === 设备尺寸 === | ||
如果您的屏幕或设备较小,则无需加载大图像文件。浏览器将使用''' <nowiki><source></nowiki> ''' | 如果您的屏幕或设备较小,则无需加载大图像文件。浏览器将使用''' <nowiki><source></nowiki> ''' 具有匹配属性值的第一个元素,并忽略其他元素。 | ||
<sample title="" hererun="s" desc="浏览器将使用它识别的第一个图像格式:" > <picture> | === 格式支持=== | ||
某些浏览器或设备可能不支持所有图像格式。通过使用该 ''' <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> '''元素。 | 注意:浏览器将使用''' <nowiki><source></nowiki> '''具有匹配属性值的第一个元素,并忽略任何后续''' <nowiki><source></nowiki> '''元素。 |
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> 元素。