HTML5“图片”-标签不起作用

Question

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

<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-tag（后备）的图片。为什么？

Answer 1

截至 2014 年 11 月，当 Chrome 39 发布并且它从版本 38 开始支持 picture 标签时，您的代码中的问题是 src="img/b2b-logo-small.png"，因为浏览器不支持 src 中的属性source 标签。它必须是srcset="img/b2b-logo-small.png"。

详情请见the spec。

还可以查看picturePolyfill，它虽然不完整，但比图片填充快得多。

Answer 2

您可以围绕您正在寻找的每个尺寸编写一些媒体查询，然后在每个尺寸显示上使用一个 ID 并隐藏媒体查询中的图像

Answer 3

图片元素isn't supported in any browsers yet，还只是一个提议。只要浏览器不支持<picture>，它就会触发该回退，因此唯一可能不支持的情况是您有Chromium build that supports it 或其他东西。

如果您使用 JS polyfill 没有问题，您仍然可以以 <picture> 可能实现的方式使用响应式图像。推动<picture> 的响应式图像社区组的成员之一斯科特·杰尔（Scott Jehl）写道picturefill。

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

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

Answer 4

由于它不属于官方 W3C HTML5 规范（它不包含在elements 列表中），因此即使是现代浏览器也不支持它，并且它可能会发生变化。