<h2>Maintaing  Image Aspect Ratio</h2>

<div class="gp"><div class="parent"><img class="child" src="http://lorempixel.com/1200/800/nature/"></div></div>

<div class="gp"><div class="parent"><img class="child" src="http://lorempixel.com/1000/960/city/"></div></div>

<div class="gp"><div class="parent"><img class="child" src="http://lorempixel.com/900/400/people/"></div></div>

<div class="gp"><div class="parent"><img class="child" src="http://lorempixel.com/600/400/sports/"></div></div>
body {
  font-family: Lato;
  margin: 10px;
  font-size: 1.4em;
  text-align: center;
}

.gp {
  width: 45%;
  display: inline-block;
  margin: 10px auto;
}

.parent {
  display: inline-block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 56.25% 0 0 0;
  overflow: hidden;
  background: black;
}

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

External CSS

  1. https://fonts.googleapis.com/css?family=Lato

External JavaScript

This Pen doesn't use any external JavaScript resources.