html - <picture> 标签如何与两个源配合使用？

Question

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

1. 如何决定加载哪张图片？
2. 背后有框架吗？

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

       <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>
   

Answer 1

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

该标签为 Web 开发人员指定图像资源提供了更大的灵活性。

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

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

该元素具有以下属性:

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

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