Stylus mixin to easily keep the aspect ratio.

m-keep-ratio.styl

/*

The HTML structure should be something like this:

<div class="box">
    <div class="box__content">
        // Images or whatever inside
    </div>
</div>

and the CSS:

.box
    m-keep-ratio("1-1")

*/

$ratio-1-1 = 100%
$ratio-1-2 = 200%
$ratio-16-10 = 62.5%
$ratio-16-9 = 56.25%
$ratio-2-1 = 50%
$ratio-4-3 = 75%

m-keep-ratio($value = "16-9")
    position: relative
    &:before
        content: ""
        display: block
        padding-top: $ratio + "-" + $value
    & > :first-child
        bottom: 0
        height: 100%
        left: 0
        position:  absolute
        right: 0
        top: 0
        width: 100%