<div class="container">

  <p style="--aspect-ratio:16/9">
    <img data-src="http://satyr.io/320x180" width="320" height="180" alt="Image…">
  </p>
  
</div>
/* Inspired by https://codepen.io/airen/pen/BZQgRb */

[style*="--aspect-ratio"] {
  background: lightgrey;
  position: relative;
  padding-bottom: calc(100% / (var(--aspect-ratio)));  
}

[style*="--aspect-ratio"] > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  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.