Responsive images

// Responsive images

by David_Knowles

HTML

<h1>Responsive Images using Picture with Source attribute</h1>

<h4><a href="http://point-online.nl/project/xs4all/responsive-images/imgsrcset.html">http://point-online.nl/project/xs4all/responsive-images/imgsrcset.html</a></h4>




<picture>
	<!-- 16:9 crop -->
	
	<source
		srcset="http://point-online.nl/project/xs4all/responsive-images/3_Alles_in_een-1920.jpg   1920w,
		        http://point-online.nl/project/xs4all/responsive-images/3_Alles_in_een-1600.jpg  1600w,
		        http://point-online.nl/project/xs4all/responsive-images/3_Alles_in_een-1200.jpg   1200w,
                http://point-online.nl/project/xs4all/responsive-images/3_Alles_in_een-960.jpg    960w,
		        http://point-online.nl/project/xs4all/responsive-images/3_Alles_in_een-650.jpg   650w" />
	<img
		src="http://point-online.nl/project/xs4all/responsive-images/3_Alles_in_een-960.jpg"
		alt="Detail of the above quilt, highlighting the embroidery and exotic stitchwork." />
</picture>

CSS

body {padding: 2em;}
picture,
picture img {width:100%; height:auto;}

JavaScript

// Responsive images