HTML5"图片"-Tag不起作用

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-tag(后备)中的图片.为什么？

Answer 1

在任何浏览器中都不支持图片元素,它仍然只是一个提案.只要浏览器不支持<picture>,它就会遇到这种后备,所以唯一可能没有的就是你有一个支持它的Chromium版本.

<picture>如果使用JS polyfill没有问题,您仍然可以以可能实现它的方式使用响应式图像.响应图像社区组织成员之一斯科特·杰尔(Scott Jehl)正在推动<picture>写作图片.

您必须以不同的方式编写代码,而不是使用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>