mishelen
8/19/2014 - 8:58 PM

constant aspect ratio for child in container Создание блока с постоянным соотношением сторон, на псевдоэлементе, по существу блок нулевой вы

constant aspect ratio for child in container Создание блока с постоянным соотношением сторон, на псевдоэлементе, по существу блок нулевой высоты, высота получается за счет паддинга псевдоребенка, сам ребенок абсолютно позиционируется в этом получившемся контейнере. По умолчанию миксина предполагает ребенком img, также считается что контейнер будет заполнять полностью своего родителя.

mixin-for-constant-aspect-ratio-to-block.scss
content_copyfile_download
@mixin stretching-pos($type-pos: absolute) {
    left: 0;top: 0;right: 0;bottom: 0;
    position: $type-pos;
}

@mixin stretching-hw($type-pos: absolute) {
    height: 100%; width: 100%;
    position: $type-pos;
}


@mixin i-b($v-a:middle) {
    display: inline-block;
    vertical-align: $v-a;
    zoom: 1;
    *display: inline;
}


@mixin imgwrapper-aspect-ratio($width-of-parent:true,$aspect-ratio:9/16,$child: "img") {
    @include i-b();
    @if ($width-of-parent) {
        width: 100%; // whatever width you want
    }
    position: relative;
    &:after {
        padding-top: percentage($aspect-ratio);
        display: block;
        content: '';
    }
    #{$child} {
        @include stretching-pos($type-pos: absolute); // fill parent
    }
}