При использовании <source>отображаются только изображения по умолчанию

Question

Я пытаюсь использовать <picture> а также <source> элементы, чтобы обеспечить некоторые адаптивные изображения для моего сайта.

Моя проблема в том, что показывает только изображение по умолчанию. Я попытался перезагрузить страницу, используя окна разных размеров, и я также загрузил PictureFill.

Что я делаю неправильно?

<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: я использовал Chrome при получении этой проблемы

Answer 1

Я бы попробовал это:

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