Cet article de juillet 2013 décrit une méthode d'utilisation des éléments psuedo pour maintenir le rapport hauteur / largeur des éléments, même lors de sa mise à l'échelle.
Voici un mixin Sass qui simplifie un peu les calculs.
@mixin aspect-ratio($width, $height) ( position: relative; &:before ( display: block; content: ""; width: 100%; padding-top: ($height / $width) * 100%; ) > .content ( position: absolute; top: 0; left: 0; right: 0; bottom: 0; ) )Le mixin suppose que vous imbriquez un élément avec la classe de contenu à l'intérieur de votre bloc initial. Comme ça:
insert content here this will maintain a 16:9 aspect ratio Utiliser le mixin est aussi simple que:
.sixteen-nine ( @include aspect-ratio(16, 9); )Résultat:
.sixteen-nine ( position: relative; ) .sixteen-nine:before ( display: block; content: ""; width: 100%; padding-top: 56.25%; ) .sixteen-nine > .content ( position: absolute; top: 0; left: 0; right: 0; bottom: 0; )Démo
Voici une démo montrant le code ci-dessus en action. L'animation est ajoutée pour montrer l'élément conservant le rapport hauteur / largeur attribué lors de son redimensionnement.
Voir la démonstration du rapport hauteur / largeur du stylet par Sean Dempsey (@seanseansean) sur CodePen.
Merci à Sean Dempsey (@thatseandempsey) pour celui-ci!