Acest articol din iulie 2013 descrie o metodă de utilizare a elementelor psuedo pentru a menține un raport de aspect al elementelor, chiar și în măsura în care este scalat.
Iată un mixaj Sass care simplifică puțin matematica.
@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; ) )Mixinul presupune că veți fi cuibărit un element cu clasa de conținut din blocul inițial. Ca aceasta:
insert content here this will maintain a 16:9 aspect ratio Utilizarea mixinului este la fel de ușoară ca:
.sixteen-nine ( @include aspect-ratio(16, 9); )Rezultat:
.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
Iată o demonstrație care arată codul de mai sus în acțiune. Animația este adăugată pentru a afișa elementul menținând raportul de aspect atribuit pe măsură ce redimensionează.
Vezi Demo-ul Pen Maintain Aspect Ratio de Sean Dempsey (@seanseansean) pe CodePen.
Mulțumim lui Sean Dempsey (@thatseandempsey) pentru aceasta!