使用 picture 和 source 元素可以根据不同的屏幕尺寸和分辨率,提供不同的图像资源。具体步骤如下:
示例代码如下:
<picture>
<source media="(min-width: 768px)" srcset="high-res-image.jpg">
<source media="(min-width: 480px)" srcset="medium-res-image.jpg">
<img src="low-res-image.jpg" alt="A beautiful image">
</picture>
在上面的示例代码中,如果屏幕宽度大于等于 768 像素,就会使用 high-res-image.jpg 这张高分辨率图像,如果屏幕宽度大于等于 480 像素但小于 768 像素,就会使用 medium-res-image.jpg 这张中等分辨率图像,否则就会使用 low-res-image.jpg 这张低分辨率图像。