Selles 2013. aasta juuliartiklis kirjeldatakse meetodit psuedo elementide kasutamiseks elementide kuvasuhte säilitamiseks, isegi kui see mõõtkavas on.
Siin on Sassi miks, mis matemaatikat natuke lihtsustab.
@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 eeldab, et pesite elementi, mille sisuklass on teie algses plokis. Nagu nii:
insert content here this will maintain a 16:9 aspect ratio Mikseri kasutamine on sama lihtne kui:
.sixteen-nine ( @include aspect-ratio(16, 9); )Tulemus:
.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
Siin on demo, mis näitab ülaltoodud koodi toimimist. Animatsioon lisatakse, et näidata elemendi suuruse muutmisel määratud kuvasuhet.
Vaadake Sean Dempsey (@seanseanean) pliiatsi säilitamise kuvasuhte demo CodePenis.
Täname Sean Dempseyt (@thatseandempsey) selle eest!