不同屏幕尺寸下显示不同的图片

使用<picture>元素实现

• ​​​​​​​<picture> 元素用于包裹一组 <source> 元素和一个 <img> 元素，它们提供了多个图片源供浏览器选择。
• <source> 元素包含了不同尺寸或者分辨率的图片源，其中的 srcset 属性指定了图片的地址，而 media 属性则规定了在哪些屏幕尺寸下使用这个图片源。
• <img> 元素是作为备用，当浏览器不支持 <picture> 元素时会显示它。它的 src 属性是默认的图片源。

案例

<picture>
  <source srcset="1.jpg" media="(min-width: 1000px)">
  <source srcset="2.jpg" media="(min-width: 700px)">
  <img src="3.jpg" alt="Description of the image">
</picture>

案例说明：在这个例子中，如果浏览器的窗口宽度大于或等于 1000px，就会加载 1.jpg；如果宽度大于或等于 700px，但小于 1000px，则会加载 2.jpg；如果屏幕宽度小于 700px，则会加载 3.jpg。