The CSS aspect-ratio property is a new addition to CSS that allows us to enforce the correct sizing of items that don’t have an intrinsic size. A good example here would be a you tube video embedded into a website using an iFrame. This tutorial video looks at that exact scenario and first checks out the current padding-top ‘hack’ that is utilized today to perform this. And then how to use the new aspect-ratio to replace this. The reduced clutter from using aspect-ratio and also the clarity that it provides is self evident at this point.
It should be noted that as of the time of this video the property is only available in chrome 88, but is implemented in Safari and Firefox behind a flag so will be covered in all major browsers in the near future.,
Reference to other information on aspect ratio:
https://web.dev/aspect-ratio/
And for Beagle lovers the SmudgeTheBeagle youtube site!
https://www.youtube.com/smudgethebeagle
source