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