Šiame 2013 m. Liepos mėn. Straipsnyje aprašytas „psuedo“ elementų naudojimo būdas išlaikyti elementų formato koeficientą, net kai jis keičiamas.
Štai „Sass“ derinys, kuris šiek tiek supaprastina matematiką.
@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“ daro prielaidą, kad pradiniame bloke įdėsite elementą su turinio klase. Kaip šitas:
insert content here this will maintain a 16:9 aspect ratio Naudoti miksiną yra taip paprasta, kaip:
.sixteen-nine ( @include aspect-ratio(16, 9); )Rezultatas:
.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; )Demonstracija
Čia yra demonstracinė versija, rodanti pirmiau nurodytą kodą. Animacija pridedama, kad būtų parodytas elementas, išlaikydamas priskirtą formato dydį.
Žr. Seano Dempsey (@ seanseaneanean) „Pen palaikyti vaizdo santykį“ demonstraciją „CodePen“.
Ačiū Seanui Dempsey (@thatseandempsey) už šį!