responsive images in practice

by Peter Aad

HTML

<figure>
    <img srcset="https://pixabay.com/get/d48c4b869ae9b344ab2a/1436252713/ladybug-796481_1920.jpg 1920w, 
	        https://pixabay.com/get/86804158578051d81761/1436252711/ladybug-796481_1280.jpg 1280w,
	        https://pixabay.com/static/uploads/photo/2015/06/03/14/24/ladybug-796481_640.jpg 640w" sizes="100vm" src="https://pixabay.com/get/86804158578051d81761/1436252711/ladybug-796481_1280.jpg" alt="Seven spotted ladybug.">
</figure>

CSS

* {
    box-sizing: border-box;
}
body {
    font-size: 1.25em;
}
figure {
    padding: 0 1em;
    max-width: 33em;
}
img {
    display: block;
    width: 100%;
}