CSS Fixed Aspect Ratio

Published 2 years ago.
Last updated July 31st, 2021

Scaling an element while retaining it’s aspect ratio relies on the surprising fact that padding-top percentages are relative to width.

HTML

<div class="wrapper">
    <div class="main">
        This div scales responsively at a 16:9 aspect ratio.
    </div>
</div>

CSS

.wrapper {
    width: 100%; /* whatever width you want */
    display: inline-block;
    position: relative;
}
.wrapper:after {
    padding-top: 56.25%; /* 16:9 ratio */
    display: block;
    content: '';
}
.main {
    /* fill the parent */    
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    /* style the element */
    padding: 1em;
    background-color: deepskyblue;
    color: white;
}