Question

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

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

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

    <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开发人员提供了指定图像资源的更大灵活性。

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

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

该元素具有以下属性：

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

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

<picture>标签如何与两个来源一起使用？

1 个答案: