element), so that it will maintain its shape while scaling to any size. For example, you may be displaying a YouTube video in an iframe, and you want to make sure it shows up in 16:9. This is relatively simple to accomplish due to a CSS quirk. Per w3.org, when you set the CSS padding for a box: The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. That is, if you have a 200 pixel-wide element and you set its padding-bottom to 50%, the bottom padding will be 100 pixels--regardless of the element's height!¹ We can take advantage of this fact to set an aspect ratio for an element, even as the window scales to any size. All we have to do is divide the height of our aspect ratio by its width, and then use that as the percentage for padding-bottom. For example, to enforce a 16:9 aspect ratio for an element, divide 9 by 16, which is 0.5625. Then, set the padding-bottom to 56.25%. Note that you also have to set the height to 0 to ensure that the padding constitutes the entirety of the element. Here's a full CSS class for a 16:9 container: .aspect-ratio--16x9 { width: 100%; height: 0; padding-bottom: 56.25%; }Working out the quirks One issue you might face here is that, while the 16:9 container takes up the right amount of space on the page, its height is set to 0. While this will work fine for displaying a background image cropped to a specific aspect ratio, it doesn't handle actual content well. Take the YouTube iframe from earlier: if you put an iframe into this container, it won't actually fit into the aspect ratio you've specified. By default, YouTube's embed code includes width and height attributes on the video player iframe, so it will stick out of your container element if it's too big. Meanwhile, if you style it with