JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<p>Responsive Images (Vertical Center) - The top-padding percentage trick:</p>

<ul class="aspect">
  <li><a href="#"><img src="http://lorempixel.com/320/200/abstract" /></a></li>
  <li><a href="#"><img src="http://lorempixel.com/320/320/city" /></a></li>
  <li><a href="#"><img src="http://lorempixel.com/200/150/technics" /></a></li>
  <li><a href="#"><img src="http://lorempixel.com/300/150/nature" /></a></li>
</ul>

CSS

ul.aspect
{
  width: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.aspect li
{
  float: left;
  width: 33.3%;
  padding: 0;
  margin: 0;
  background-color: #000;
  border: 10px solid #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.aspect li a
{
    background-color: #333;
    display: block;
    width: 100%;
    position: relative;
    height: 0;
    padding: 66.25% 0 0 0;
    overflow: hidden;
}

.aspect img
{
    position: absolute;
    display: block;
    max-width: 100%;
    left: 0;
    right: 0;
    top: -100%;
    bottom: -100%;
    margin: auto;
}