gerd
6/3/2018 - 8:05 PM

We use this for creating scalable elements (usually images / background images) that maintain a ratio.

We use this for creating scalable elements (usually images / background images) that maintain a ratio.

mx-Responsive-Ratio
content_copyfile_download
div {
    @include responsive-ratio(16,9);
}


@mixin responsive-ratio($x,$y, $pseudo: false) {
    $padding: unquote( ( $y / $x ) * 100 + '%' );
    @if $pseudo {
        &:before {
            @include pseudo($pos: relative);
            width: 100%;
            padding-top: $padding;
        }
    } @else {
        padding-top: $padding;
    }
}