<div class="container">

  <p class="box">
    <span class="box__in"></span>
  </p>
  
</div>
.box__in {    
  background-image: url("http://satyr.io/320x320");  
  background-size: cover; /* Even if we have non-aspect ratio image */
  background-position: center center;     
}  

/* padding-bottom aspec-ration trick: */

.box {
  position: relative;
  height: 0;
  padding-bottom: 56.25%; /* Aspect ratio: 16:9 = 9 / 16 * 100 */
}

.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.