Scalable Boxes with Padding-top Trick in CSS

Create aspect-ratio boxes that scale with the width of their container using the padding-top trick.

Source Code

.scalable-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.scalable-box > * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}