scss 容器中儿童的纵横比恒定$ b $bСозданиеблокаспостояннымсоотношениемсторон，напсевдоэлементе，посуществублокнуле

Posted 2021-05-18

@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
    }
}