Create an CSS-only Responsive Image Grid (with ratio scaling)

(almost) Everywhere on the web you see Responsive Websites. Some with a lot photos, some with none. But it seems to be difficult for some (junior) developers to let there pictures scale in ratio with only CSS.

Because of that i build an small demo, to show these guys (and maybe you als medior or senior) how to build there ratio scaling images with only CSS!

Step 1

Create an HTML list with images and an text label. I use dummy images from Lorempixel.com, it’s super handy!

<div class="my_container"> <ul> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/people" /> <span>People</span></a> </li> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/food" /> <span>Food</span></a> </li> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/cats" /> <span>Cats</span></a> </li> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/transport" /> <span>Transport</span></a> </li> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/abstract" /> <span>Abstract</span></a> </li> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/nightlife" /> <span>Nightlife</span></a> </li> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/city" /> <span>City</span></a> </li> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/sports" /> <span>Sports</span></a> </li> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/people" /> <span>People</span></a> </li> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/food" /> <span>Food</span></a> </li> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/cats" /> <span>Cats</span></a> </li> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/transport" /> <span>Transport</span></a> </li> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/abstract" /> <span>Abstract</span></a> </li> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/nightlife" /> <span>Nightlife</span></a> </li> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/city" /> <span>City</span></a> </li> <li class="block"> <a href="#"><img src="http://lorempixel.com/400/400/sports" /> <span>Sports</span></a> </li> </ul> </div> Read more