Sizes in source picture

Use VW size in sizes attribute source tag for picture.

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

HTML

<div class="container">
<picture>
    <source srcset="//lh3.googleusercontent.com/-ufQlNHbqX-E/VTODhccBeMI/AAAAAAAAE-o/Mv07yypui04/w820/example-image.jpg 820w" media="(min-width: 820px)" sizes="80vw"/>
    <source srcset="//lh3.googleusercontent.com/-ufQlNHbqX-E/VTODhccBeMI/AAAAAAAAE-o/Mv07yypui04/w620/example-image.jpg 620w" media="(min-width: 620px)" sizes="60vw"/>
    <source srcset="//lh3.googleusercontent.com/-ufQlNHbqX-E/VTODhccBeMI/AAAAAAAAE-o/Mv07yypui04/w420/example-image.jpg 420w"/>
    <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; width:90% }
picture img { max-width:100%;vertical-align: middle }