Live
x
<div class="container"> <p class="aspect-ratio-box aspect-ratio-box--16-9"> <img class="aspect-ratio-box__in" src="https://satyr.dev/320x180" width="320" height="180" alt="Image…"> </p> </div>
Live
xxxxxxxxxx26
.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.