padding-bottom: 56.25%
El 56.25% que se le asignó al
-bottom
no es un número aleatorio, viene de la siguiente fórmula:
- (aspect ratio height / aspect ratio width) * 100
Entonces, si buscamos un aspect ratio de 16:9, haríamos lo siguiente:
- (9 / 16) * 100 = 56.25
Para un aspect ratio de 4:3:
- (3 / 4) * 100 = 75
Y así con el aspect ratio que queramos.
Este link tiene más información sobre el tema: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp (ahí utilizan
-top
en vez de
-bottom
, pero es lo mismo).
