Tento článek z července 2013 popisuje metodu používání prvků psuedo k udržení poměru stran prvků, i když se mění.
Tady je mix Sass, který 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 předpokládá, že vnoříte prvek s třídou obsahu uvnitř původního bloku. Takhle:
insert content here this will maintain a 16:9 aspect ratio Použití mixinu je stejně snadné jako:
.sixteen-nine ( @include aspect-ratio(16, 9); )Výsledek:
.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ázka
Zde je ukázka ukazující výše uvedený kód v akci. Přidá se animace, aby se zobrazil prvek udržující přiřazený poměr stran při změně velikosti.
Podívejte se na ukázku Pen Maintain Aspect Ratio Demo od Sean Dempsey (@seanseansean) na CodePen.
Díky Sean Dempsey (@thatseandempsey) za tento!