Denne artikkelen fra juli 2013 beskriver en metode for å bruke psuedo-elementer for å opprettholde et elementformat, selv når det skaleres.
Her er en Sass-mix som forenkler matematikken litt.
@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; ) )Mixin antar at du vil hekke et element med innholdsklassen i din første blokk. Som dette:
insert content here this will maintain a 16:9 aspect ratio Å bruke mixin er like enkelt som:
.sixteen-nine ( @include aspect-ratio(16, 9); )Resultat:
.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
Her er en demo som viser koden ovenfor i aksjon. Animasjonen legges til for å vise elementet som opprettholder det tildelte størrelsesforholdet når det endrer størrelse.
Se Pen Paintain Aspect Ratio Demo av Sean Dempsey (@seanseansean) på CodePen.
Takk til Sean Dempsey (@thatseandempsey) for denne!