Background Image that maintains aspect ratio

by Matthew Day

HTML

<div class="nimg">
  <div class="card"></div>
</div>

CSS

/* We need a parent whose width is responsive. */

.nimg {
  width: 50%;
}

/* The height of the child is the desired aspect ratio expressed as a percentage. The width is determined by the parent. */
.card {
  background-image: url("http://placekitten.com/g/300/200");
  height: 0;
  overflow: hidden;
  padding-top: 66.67%;
  background-repeat: no-repeat;
  background-size: cover;
}