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

功能

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>

注意事项

1. <picture>是行内元素。

2. 默认显示source引入的图片资源，当不满足设置的media（媒体查询）条件或source不存在，则显示img引入的图片资源

3. 若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>
   

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

5. 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>