Resize your browser window from left to right to see how the images form neat columns, displaying the full image. A poorly designed page will eventually only display part of an image as you resize.
In CSS
body {max-width:1100px; margin:auto; padding:20px} /* the max is important */
img {max-width:100%; height:auto;}
section {text-align:center}
figure {display:inline-block; width:240px; text-align:center; margin:5px;}
/* Note: margin set to 5 because figure has default left and right 40px margins */
/* Will display 1 column on 360px smartphone, 4 columns on 1000px PC */
/* Set width to 480px for larger images and only two columns on a 1000px PC */
In HTML
One <section> containing
four <figure>s
each
containing an <img src="images/monitor.jpg" alt="monitor">
each image
with a
<figcaption>
View Source to see code
