Fixed aspect ratio div
This technique is using the padding of the pseudo-element of .fixed-ratio
to set the height of .fixed-ratio
. The .content
div is made to fill this fixed aspect ratio container.
This works because the top or bottom percentage length of the padding is using a percentage of the width of the containing element, according to the specs. So we can set both height and width from the width of the container.
.fixed-ratio {
width: 30em; /* This can be any width */
position: relative;
}
.fixed-ratio::before {
content: '';
padding-bottom: 100%; /* This is for a square div */
display: block;
}
.fixed-ratio .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}