＜picture＞标签——自适应显示不同图片

最新推荐文章于 2025-06-07 10:35:55 发布

原创最新推荐文章于 2025-06-07 10:35:55 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

25 篇文章

订阅专栏

picture元素结合source和img标签，通过媒体查询在不同屏幕尺寸下显示不同图片。无媒体查询条件的source会优先显示。确保有img标签，否则无法显示图片。

功能

picture元素通过包含一个或多个元素和一个元素再结合media（媒体查询）来使用，
根据屏幕匹配的不同尺寸显示不同图片，如果没有匹配到或浏览器不支持 picture 属性则使用 img 元素：

案例

菜鸟案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>picture 元素</h2>
<picture>
  <source media="(min-width: 650px)" srcset="https://static.runoob.com/images/mix/html-css-js.png">
  <source media="(min-width: 465px)" srcset="https://static.runoob.com/images/mix/htmlbig.png">
  <img src="https://static.runoob.com/images/mix/img_avatar.png"  style="width:auto;">
</picture>

</body>
</html>

注意事项

<picture>是行内元素。
默认显示source引入的图片资源，当不满足设置的media（媒体查询）条件或source不存在，则显示img引入的图片资源

若source中没有写media（媒体查询）条件，则默认满足条件，显示该source引入的图片，这样的话永远都不会显示img图片。
(1)第一个source 没有写media条件，则不论屏幕宽度是多少，都显示第一个source引入的图片。因为没有media默认满足条件，则不会继续往下判断。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>picture 元素</h2>

<picture>
  <source  srcset="https://static.runoob.com/images/mix/html-css-js.png">
  <source media="(min-width: 465px)" srcset="https://static.runoob.com/images/mix/htmlbig.png">
  <img src="https://static.runoob.com/images/mix/img_avatar.png"  style="width:auto;">
</picture>


</body>
</html>

（2）第二个source没有写media条件，则当第一个source满足条件时，显示第一个source图片，否则显示第二个source图片。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>picture 元素</h2>

<picture>
  <source media="(min-width: 650px)" srcset="https://static.runoob.com/images/mix/html-css-js.png">
  <source  srcset="https://static.runoob.com/images/mix/htmlbig.png">
  <img src="https://static.runoob.com/images/mix/img_avatar.png"  style="width:auto;">
</picture>


</body>
</html>

picture标签中必须有img，如果只有source，则不会显示任何图片

picture标签有几个img，就会显示几张图片，如何是是source满足条件，则显示3张同样的该source引入的图片，否则显示img各自引入的图片。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>picture 元素</h2>

<picture>
  <source media="(min-width: 650px)" srcset="https://static.runoob.com/images/mix/html-css-js.png">
  <source media="(min-width: 465px)" srcset="https://static.runoob.com/images/mix/htmlbig.png">
  <img src="https://static.runoob.com/images/mix/img_avatar.png"  style="width:auto;">
  <img src="https://static.runoob.com/images/mix/htmlbig.png"  style="width:auto;">
  <img src="https://static.runoob.com/images/mix/html-css-js.png"  style="width:auto;">
</picture>

</body>
</html>