CSS Aspect Ratio - Practical Example

Pubblicato il: 01 febbraio 2021
sul canale di: A shot of code

476

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://css-tricks.com/aspect-ratio-b...

https://web.dev/aspect-ratio/

And for Beagle lovers the SmudgeTheBeagle youtube site!

/ smudgethebeagle

In questa pagina del sito puoi guardare il video online CSS Aspect Ratio - Practical Example della durata di ore minuti seconda in buona qualità , che l'utente ha caricato A shot of code 01 febbraio 2021, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 476 volte e gli è piaciuto 19 spettatori. Buona visione!

195,840

8.9K