<main>
<section>
<!-- Aspect ratio padding trick -->
<figure class="img-4-3">
<img data-twic-src="placeholder:auto">
</figure>
</section>
</main>
main {
max-width: 1000px;
margin: auto;
padding: 1em;
}
section {
display: flex;
justify-content: center;
margin-bottom: 1em;
}
img {
display: block;
}
figure {
margin: 0;
}
.img-4-3 {
position: relative;
width: 100%;
height: 0;
padding-top: calc(3 / 4 * 100%);
}
.img-4-3 > img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}
This Pen doesn't use any external CSS resources.