<**picture>元素通过包含多个<source>元素（需要写媒体特性）和一个<img>元素为不同的显示设备场景提供适合的图片版本
注意<picture>元素IE不支持
代码如下**

  1.     <div class="container">
  2.         <div class="row mt-5" >
  3.             <!-- 图片使用媒体查询 -->
  4.             <picture>
  5.                 <source media="(min-width:1200px)" srcset="./images/1140.jpg"> 
  6.                 <source media="(min-width:990px)" srcset="./images/960.jpg">
  7.                 <source media="(min-width:768px)" srcset="./images/720.jpg">
  8.                 <source media="(min-width:576px)" srcset="./images/540.jpg">
  9.                 <img src="./images/img_01.jpg" class="img-fluid"  alt="">    
  10.             </picture>
  11.         </div>
  12.     </div>

由于是动态效果无法用静态图片显示

与

元素代表一段独立的内容与
元素配合使
有些图片下面会有一行解释文字就可以使用这种结构如下代码

  1.     <div class="container">
  2.         <div class="row mt-5">
  3.             <div class="col">
  4.                 <figure class="figure">
  5.                     <img src="./images/img_01.jpg" class="figure-img img-fluid" alt="">
  6.                     <figcaption class="figure-caption text-center">This is the img title</figcaption>
  7.                 </figure>
  8.             </div>
  9.         </div>
  10.     </div>

效果图
image.png