HTML 图片元素响应式图像
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
今天我们将探讨一下HTML Picture element。它可用于实现原生响应式图像支持。
具体做法是，我们将普通的img标签包裹在一个picture元素内，然后添加srcset图片。
然后，它将通过媒体查询来定义要显示的图像。
HTML 图片元素
好的，我们开始吧！
在这个例子中，我们将使用极端情况，通常情况下，你只会使用原始图像的修改版本，但尺寸更小或方向不同。
<picture>
<source
media="(min-width: 650px)"
srcset="https://images.unsplash.com/photo-1589965716319-4a041b58fa8a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1867&q=80"
/>
<source
media="(min-width: 465px)"
srcset="https://images.unsplash.com/photo-1534235261404-7625cd79bdb9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80"
/>
<img
src="https://images.unsplash.com/photo-1537151608828-ea2b11777ee8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=939&q=80"
alt="A amazing corgi dog"
/>
</picture>
接下来我们应该会看到以下内容：
- 屏幕上方650像素处——山上的柯基犬
- 屏幕分辨率介于 465 和 650 像素之间 - 楼梯上的柯基犬
- 屏幕小于 465 - 柯基幼犬！
这难道不令人惊叹吗！
为了使此功能更加完善，添加loading="lazy"。
欢迎在 Codepen 上查看这些柯基犬。
浏览器支持
这是一个超酷的功能，但正如预期的那样，IE 和 Opera Mini 并不支持。
不过！它们会回退到默认图片！所以使用起来并没有什么问题！
感谢阅读，让我们保持联系！
感谢您阅读我的博客。欢迎订阅我的电子邮件简讯，也可以在Facebook或Twitter上关注我。
文章来源：https://dev.to/dailydevtips1/html-picture-element-responsive-images-29m8