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