V tem članku iz julija 2013 je opisana metoda uporabe elementov psuedo za ohranjanje razmerja stranic elementov, tudi ko le-ta meri.
Tu je kombinacija Sass, ki nekoliko poenostavi matematiko.
@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 predpostavlja, da boste v začetni blok vgnezdili element z razredom vsebine. Všečkaj to:
insert content here this will maintain a 16:9 aspect ratio Uporaba mixina je tako enostavna kot:
.sixteen-nine ( @include aspect-ratio(16, 9); )Rezultat:
.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
Tu je predstavitev, ki prikazuje zgornjo kodo v akciji. Animacija je dodana, da prikaže element, ki med spreminjanjem velikosti ohranja dodeljeno razmerje stranic.
Oglejte si predstavitev Pen Maintain Aspect Ratio Demon by Sean Dempsey (@seanseansean) na CodePen.
Hvala Seanu Dempseyju (@thatseandempsey) za to!