Questo articolo di luglio 2013 descrive un metodo per utilizzare gli elementi psuedo per mantenere le proporzioni degli elementi, anche quando si ridimensiona.
Ecco un mixin di Sass che semplifica un po 'la matematica.
@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; ) )Il mixin presume che anniderai un elemento con la classe di contenuto all'interno del tuo blocco iniziale. Come questo:
insert content here this will maintain a 16:9 aspect ratio Usare il mixin è facile come:
.sixteen-nine ( @include aspect-ratio(16, 9); )Risultato:
.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; )Demo
Ecco una demo che mostra il codice sopra in azione. L'animazione viene aggiunta per mostrare l'elemento che mantiene le proporzioni assegnate durante il ridimensionamento.
Guarda la demo Pen Maintain Aspect Ratio di Sean Dempsey (@seanseansean) su CodePen.
Grazie a Sean Dempsey (@thatseandempsey) per questo!