nur Standardbilder zeigt bei Verwendung <source>

Question

Ich versuche, die <picture> und <source> Elemente zu verwenden, um einige reaktionsschnelle Bilder für meine Website bereitzustellen.

Mein Problem ist, dass nur das Standardbild zeigt. Ich habe versucht, die Seite mit verschiedenen Fenstergrößen neu zu laden, und ich habe auch PictureFill geladen.

Was mache ich falsch?

<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: Ich habe mit Chrome worden, während dieses Problem immer diese

Answer 1

ich versuchen würde,:

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