<picture> 标签如何与两个来源一起工作？答案

【问题标题】：How does <picture> tag work with two sources?<picture> 标签如何与两个来源一起工作？
【发布时间】：2018-09-04 06:13:25
【问题描述】：

我需要一些帮助来了解为什么有人会在网页中加载这样的图像？我的意思是两个标签和最后的标签。

如何决定要加载哪个图像？
背后有框架吗？

这是否意味着它会加载两个图像并以不同的分辨率在它们之间切换？

    <picture>
        <!--[if IE 9]><video style="display:none;"><![endif]-->
        <source srcset="<?php echo get_page_thumbnail('800x690', FALSE, TRUE); ?>" media="(max-width: 960px)">
        <source srcset="<?php echo get_page_thumbnail('9000x9000', FALSE, TRUE); ?>" media="(min-width: 960px)">
        <!--[if IE 9]></video><![endif]-->
        <img srcset="<?php echo get_page_thumbnail('9000x9000', TRUE, TRUE); ?>" alt="<?php echo get_page_title(); ?>" />          
    </picture>

【问题讨论】：

标签： html css image responsive-design

【解决方案1】：

https://www.w3schools.com/tags/tag_picture.asp

该标签使 Web 开发人员在指定图像资源方面具有更大的灵活性。

该元素最常见的用途是在响应式设计中用于艺术指导。无需根据视口宽度放大或缩小一张图像，而是可以设计多张图像以更好地填充浏览器视口。

元素包含两个不同的标签：一个或多个标签和一个标签。

该元素具有以下属性：

srcset（必需）- 定义要显示的图像的 URL
媒体 - 接受通常在 CSS 中定义的任何有效媒体查询
sizes - 定义单个宽度描述符、带有宽度描述符的单个媒体查询或带有宽度描述符的以逗号分隔的媒体查询列表
type - 定义 MIME 类型

浏览器将使用属性值来加载最合适的图像。浏览器将使用带有匹配提示的第一个元素并忽略任何后续标记。

【讨论】：