HTML5 “picture”-Tag doesn't work

Question

i've got a problem with the HTML5 picture -element. I would like to show a smaller image for devices with a max-width of 600px. The other devices should get the big picture.

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

Nothing happens if i reduce the width of the browser window because Chrome always shows the picture from the img -tag (Fallback). Why?

Answer 1

The picture element isn't supported in any browsers yet , it's still only a proposal. It's going to hit that fallback whenever a browser doesn't support <picture> , so the only time it might not is if you have a Chromium build that supports it or something.

You can still use responsive images in the way that <picture> might implement it, if you don't have a problem using a JS polyfill. Scott Jehl, one of the members of the Responsive Images Community Group that's pushing <picture> , wrote picturefill .

You'll have to write your code a little differently, instead of using the HTML tag, you'll use data attributes. An example from the 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

As of November 2014, when Chrome 39 is out and it supports the picture tag since version 38, the problem in your code is that the src="img/b2b-logo-small.png" , as browsers don't support the src attribute in the source tag. It must be srcset="img/b2b-logo-small.png" .

See the spec for details.

Also checkout picturePolyfill , which is less complete but much faster then picturefill.

Answer 3

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

Answer 4

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