CSSDaniel Kasmeroglu - Jan 15, 2021 19:59

Aspect Ratio

@mixin aspect-ratio($width-container, $width-ratio, $height-ratio) {
    position:                               relative;
    width:                                  #{$width-container};
    height:                                 0;
    padding-bottom:                         calc(#{$width-container} * #{$height-ratio}/#{$width-ratio});
}

@mixin aspect-ratio-child($width: 100%, $height: 100%) {
    position:                               absolute;
    top:                                    0;
    left:                                   0;
    width:                                  #{$width};
    height:                                 #{$height};
}