2

我遇到了 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 的图片（回退）。为什么？

4

4 回答 4

6

尚不支持图片元素在任何浏览器中，它仍然只是一个建议。只要浏览器不支持<picture>，它就会触发该回退，所以唯一可能不会是如果您有一个支持它的 Chromium 构建或其他东西。

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

您必须稍微不同地编写代码，而不是使用 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>
于 2013-09-06T19:03:37.817 回答
3

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

有关详细信息，请参阅规范。

还要检查picturePolyfill，它不太完整，但比 picturefill 快得多。

于 2014-11-21T11:40:40.600 回答
1

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

于 2013-09-06T19:03:23.993 回答
0

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

于 2013-09-06T19:09:47.357 回答