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

最新推荐文章于 2024-09-29 11:29:19 发布

原创最新推荐文章于 2024-09-29 11:29:19 发布 · 481 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

本文介绍了HTML5的<picture>元素及其使用方法，通过<source>和<img>元素提供不同分辨率的图片源，根据设备屏幕尺寸动态调整图片加载，提升用户体验和网站性能。

使用`<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。