only default images shows when using

Question

I am trying to use the <picture> and <source> elements to provide some responsive images for my site.

My problem is that only the default image shows. I have tried reloading the page using different window sizes and I have also loaded PictureFill.

What am I doing wrong?

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source media="(max-width: 479px)" srcset="smallImage.jpg" />
        <source media="(max-width: 640px)" srcset="mediumImage.jpg" />
        <source media="(max-width: 767px)" srcset="largeImage.jpg" />
    <!--[if IE 9]></video><![endif]-->
    <img class="rsImg" src="xLargeImg.jpg" alt="MyDefaultImg" />
</picture>

NB: I have been using Chrome while getting this issue

do you get some errors on console? maybe blocked images? – Sebastian Brosch Oct 25 '16 at 21:25 — Sebastian Brosch, Oct 25 '16 at 21:25

score 0 · Answer 1 · answered Oct 25 '16 at 21:14

0

I would try this:

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source media="(min-width: 767px)" srcset="xLargeImg.jpg" /> <!-- the default image is also stated as a source -->
        <source media="(max-width: 767px)" srcset="largeImage.jpg" />
        <source media="(max-width: 640px)" srcset="mediumImage.jpg" />
        <source media="(max-width: 479px)" srcset="smallImage.jpg" />
    <!--[if IE 9]></video><![endif]-->
    <img class="rsImg" srcset="xLargeImg.jpg" alt="MyDefaultImg" />
</picture>

answered Oct 25 '16 at 21:14

VirginieLGB

548
2
15

I have tried your solution, but I get the same result. It has lead me to thinking that the way I am testing is misleading. I am: `right click -> inspect -> hover over each tag in turn until the image gets a blue overlay` and that is the image I assumed was being served. Is this assumption incorrect – tony09uk Oct 25 '16 at 21:41

only default images shows when using

1 Answers1