Live
x
<div class="container"> <p class="box"> <img class="box__in" src="http://satyr.io/320x320" width="320" height="320" alt="Image…"> </p> </div>
Live
xxxxxxxxxx23
.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.