Image Adaptive HTML5

Example use HTML5 tag picture for image adaptive.

by Константин Кирилюк

HTML

<div class="container">
<picture>
    <source srcset="//lh3.googleusercontent.com/-ufQlNHbqX-E/VTODhccBeMI/AAAAAAAAE-o/Mv07yypui04/w820/example-image.jpg" media="(min-width: 820px)"/>
    <source srcset="//lh3.googleusercontent.com/-ufQlNHbqX-E/VTODhccBeMI/AAAAAAAAE-o/Mv07yypui04/w620/example-image.jpg" media="(min-width: 620px)"/>
    <source srcset="//lh3.googleusercontent.com/-ufQlNHbqX-E/VTODhccBeMI/AAAAAAAAE-o/Mv07yypui04/w420/example-image.jpg"/>
    <img alt="image" src="//lh3.googleusercontent.com/-ufQlNHbqX-E/VTODhccBeMI/AAAAAAAAE-o/Mv07yypui04/w620/example-image.jpg"/>
</picture>
</div>

CSS

.container { border:4px solid #eee }