Tento článok z júla 2013 popisuje metódu používania prvkov psuedo na udržanie pomeru strán prvkov, aj keď má mierku.
Tu je mix Sass, ktorý trochu zjednodušuje matematiku.
@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 predpokladá, že vnoríte prvok s triedou obsahu do pôvodného bloku. Páči sa ti to:
insert content here this will maintain a 16:9 aspect ratio Používanie mixinu je také ľahké ako:
.sixteen-nine ( @include aspect-ratio(16, 9); )Výsledok:
.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; )Ukážka
Tu je ukážka zobrazujúca vyššie uvedený kód v akcii. Pridá sa animácia, aby sa zobrazil prvok, ktorý si pri zmene veľkosti zachová priradený pomer strán.
Prezrite si ukážku Pero údržby pomeru strán od Seana Dempseyho (@seanseansean) na stránkach CodePen.
Ďakujem Seanovi Dempseyovi (@thatseandempsey) za tento!