<div class="container">

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

.box__in {    
  object-fit: cover; /* Even if we have non-aspect ratio image */
  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.