Css HTML5“；图片“-标签不'；行不通

HTML5

picture

-元素有问题。我想为最大宽度为600px的设备显示一个较小的图像。其他设备应该了解全局

<picture alt="logo"> 
     <source src="img/b2b-logo-small.png" media="max-width: 600px">
     <source src="img/b2b-logo.png" >            
     <img class="logo" src="img/b2b-logo.png" /> <!-- Fallback -->
</picture>

---

如果我缩小浏览器窗口的宽度，什么也不会发生，因为Chrome总是显示来自

img

-标记（回退）的图片。为什么？

目前它还不受支持，即使是现代浏览器也不支持，因为它不属于W3C HTML5的官方规范（它不包括在列表中），并且可能会发生更改。

图片元素，它仍然只是一个建议。每当浏览器不支持

时，它就会出现这种回退，因此唯一可能不支持的时候就是你有一个或什么的

如果使用JS polyfill没有问题，您仍然可以按照

可能实现的方式使用响应图像。斯科特·杰尔（Scott Jehl）是推动

的响应图像社区小组的成员之一，他写道

您必须以稍微不同的方式编写代码，而不是使用HTML标记，而是使用数据属性。picturefill文档中的一个示例：

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
        <span data-src="small.jpg"></span>
        <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
        <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
        <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>

        <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
        <noscript>
            <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
        </noscript>
    </span>

从2014年11月开始，当Chrome 39退出并且自版本38起支持

图片标签时，您可以围绕要查找的每个尺寸编写一些媒体查询，然后在每个尺寸上使用ID显示和隐藏媒体查询中的图像=“img/b2b logo small.png”

，因为浏览器不支持

source

标记中的

src

属性。它必须是

srcset=“img/b2b logo small.png”

有关详细信息，请参阅

---

还有签出，它不太完整，但比picturefill快得多。

主要是因为

picture

标记不是HTML5的一部分。这是一个建议。据我所知，目前没有浏览器实现它。啊，好的。我只是在这个Thx.Thx中阅读了它。现在我使用了一点SelfWritten JS来解决这个“问题”“：它现在在chrome中工作吗？我在最新的chrome中找不到它