<div class="container">

  <p class="aspect-ratio-box aspect-ratio-box--16-9">
    <img class="aspect-ratio-box__in" src="http://satyr.io/320x180" width="320" height="180" alt="Image…">
  </p>
  
</div>
.aspect-ratio-box {
  position: relative;
  height: 0;
  padding-bottom: 75%; /* Aspect ratio here */
}

.aspect-ratio-box--16-9 {
  padding-bottom: 56.25%; /* 16:9 = 9 / 16 * 100 */
}

.aspect-ratio-box__in {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* etc: */

img {
  max-width: 100%;
  height: auto;
}

.container {
  max-width: 320px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.