Live
x
<div class="container"> <p style="--aspect-ratio:16/9"> <img data-src="http://satyr.io/320x180" width="320" height="180" alt="Image…"> </p> </div>
Live
xxxxxxxxxx25
/* 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.