Den här artikeln från juli 2013 beskriver en metod för att använda psuedo-element för att upprätthålla ett elementformat, även när det skalas.
Här är en Sass-mix som förenklar matematiken lite.
@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; ) )Blandningen förutsätter att du kommer att bygga ett element med innehållsklassen i ditt första block. Så här:
insert content here this will maintain a 16:9 aspect ratio Att använda mixin är lika enkelt som:
.sixteen-nine ( @include aspect-ratio(16, 9); )Resultat:
.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
Här är en demo som visar ovanstående kod i aktion. Animationen läggs till för att visa elementet som bibehåller det tilldelade bildförhållandet när det ändrar storlek.
Se pennan upprätthålla bildförhållande-demo av Sean Dempsey (@seanseansean) på CodePen.
Tack till Sean Dempsey (@thatseandempsey) för den här!