Question

我遇到了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 - 标签（后备）中的图片。为什么呢？

Answer 1

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

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

您必须以不同的方式编写代码，而不是使用HTML标记，您将使用数据属性。来自picturefill docs的一个例子：

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

截至2014年11月，当Chrome 39退出并且它支持自版本38以来的picture代码时，代码中的问题是src="img/b2b-logo-small.png"，因为浏览器不支持src {}}}标记中的1}}属性。它必须是source。

有关详细信息，请参阅the spec。

同时结帐picturePolyfill，这不完整但比图片填充快得多。

Answer 3

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

Answer 4

您可以针对您要查找的每种尺寸编写一些媒体查询，然后在每个尺寸的节目中使用ID并隐藏媒体查询中的图像

HTML5“图片”-Tag不起作用

4 个答案: