JSFiddle - React, Tailwind, and code Playground

by stroz

HTML

<div class="thumb grid_6">
    <img src="http://placekitten.com/g/200/300" />
</div>

CSS

.grid_6 {
    width: 100%;
    overflow:hidden;
    position:relative;
}

.grid_6::after {
  padding-top: 56.25%; /* percentage of containing block _width_ */
  display: block;
  content: '';
}

.thumb img {
    display: block;
    width:100%;
    height:auto;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}