$ratios: (
    '1by1': 100%,
    '1by2': 200%,
    '2by1': 50%,
    '2by3': 150%,
    '3by1': 33.3333%,
    '3by2': 66.6666%,
    '3by4': 133.3333%,
    '3by5': 166.6666%,
    '4by3': 75%,
    '4by5': 125%,
    '5by1': 20%,
    '5by2': 40%,
    '5by3': 60%,
    '5by4': 80%,
    '9by16': 177.7777%,
    '10by1': 10%,
    '16by9': 56.25%,
);

%ratio { position: relative; width: 100%; height: 0; }
%ratioChild {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
@each $name, $ratio in $ratios {
    .ratio-#{$name} {
        @extend %ratio;
    }
    .ratio-#{$name} { padding-top: #{$ratio}; }
    .ratio-#{$name} > * {
        @extend %ratioChild;
    }
}

.ratio-stretch {
    width: 100%;
    height: 100%;
    display: block;
}
.ratio-fullwidth {
    width: 100%;
    display: block;
}