Denne artikel fra juli 2013 beskriver en metode til brug af psuedo-elementer til at opretholde et billedformat, selv når det skaleres.
Her er en Sass-mix, der forenkler matematikken lidt.
@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 antager, at du indlejrer et element med indholdsklassen i din oprindelige blok. Sådan her:
insert content here this will maintain a 16:9 aspect ratio Brug af mixin er lige så let 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, der viser ovenstående kode i aktion. Animationen tilføjes for at vise elementet, der opretholder det tildelte billedformat, når det ændrer størrelse.
Se pennen vedligehold aspektforholdsdemonstration af Sean Dempsey (@seanseansean) på CodePen.
Tak til Sean Dempsey (@thatseandempsey) for denne!