 When doing a responsive web design, it is natural not to know the width of an element. After all, you are supposed to respond to the different sizes of your user's screens. However, sometimes it is desirable, if not required, that the element maintains a certain aspect ratio. CSS does not yet have a way to give an element an inherent aspect ratio, so this is a problem. But we can work around this with a little trick. When you set padding top of an element to a percentage value, that percentage is relative to, and now brace yourself, the parent's width. The wider the parent, the more padding top. As counterintuitive as this might seem, it comes in incredibly handy for solving our aspect ratio problem. To make our element keep an aspect ratio, we set padding top to the inverse of the aspect ratio in percent. You can do the math yourself or make use of CSS calc expressions. Our element will now maintain its aspect ratio. Huzzah! The astute viewer, however, will have noticed that despite all the math, a padding is still a padding and will push down the content of our element. To counteract that, we have to add a little wrapper element that can negate the padding effect. And we're done! Nobody likes adding wrappers, but sometimes there is no other way. You win some, you lose some. See you next time. We've all been here before. There's the Chrome, there's last video, you should click it. Go! I'm not going to stop until you click.