A new way to keep aspect ratio

Sunday 7th of June 5:10 PM
Vicentiu B.

A few days ago I searched CSS Aspect Ratio, in my attempt to keep an embedded video at a certain aspect ratio on page resize.

The first link I found was on W3 Schools. However, this shows a somewhat hackish way to do it. Using a 56.25% padding-top.

After stumbling on this tweet, I found out how you can keep the aspect ratio natively. It's not yet fully supported, but it will be. Just add aspect-ratio: 16/9 to your wrapping element and you're done.

Check out this "old way" of doing aspect ratio, on CodePen.

And now, with Chrome Canary, after enabling Experimental Web Platform Features (chrome://flags), you can try out this pen.

Vicentiu B.  

Passionate full-stack developer with an eye for User Interface and flashy new web features