小白教程
所有教程
关于
Search
172.70.130.241
172.70.130.241
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML picture 标签”的源代码
本页内容
上一节:
HTML背景图片
下一节:
HTML网站图标Favicon
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[Category:HTML教程|21]] ''' <nowiki><picture></nowiki> '''元素允许您为不同的设备或屏幕尺寸显示不同的图片。 == HTML <nowiki><picture></nowiki> 元素 == HTML''' <nowiki><picture></nowiki> '''元素使 Web 开发人员在指定图像资源方面具有更大的灵活性。 ''' <nowiki><picture></nowiki> '''元素包含一个或多个元素,每个元素通过 属性''' <nowiki><source></nowiki> '''引用不同的图像。''' <nowiki>srcset</nowiki> '''这样浏览器可以选择最适合当前视图和/或设备的图像。 每个''' <nowiki><source></nowiki> '''元素都有一个 ''' <nowiki>media</nowiki> '''属性,用于定义图像何时最合适。 <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><source></nowiki> ''' 具有匹配属性值的第一个元素,并忽略其他元素。 === 格式支持=== 某些浏览器或设备可能不支持所有图像格式。通过使用该 ''' <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> '''元素。
返回至“
HTML picture 标签
”。
上一节:
HTML背景图片
下一节:
HTML网站图标Favicon