Extends Bootstap: Makes any object adjust width/height to an aspect ratio

ratio.less

@screen-xs: 640px !default;
@screen-sm: 768px !default;
@screen-md: 1024px !default;
@screen-lg: 1280px !default;

.ratio {
    position: relative;
    
    &:before {
        content: '';
        display: block;
    }
}

.ratio-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.make-ratio(@w, @h) {
    @perc: ((@h/@w)*100)%;
    
    .ratio-xs-@w-@h {
        @media screen and (min-width: @screen-xs) {
            padding-top: @perc;
        }
    }
    
    .ratio-sm-@w-@h {
        @media screen and (min-width: @screen-sm) {
            padding-top: @perc;
        }
    }
    
    .ratio-md-@w-@h {
        @media screen and (min-width: @screen-md) {
            padding-top: @perc;
        }
    }
    
    .ratio-lg-@w-@h {
        @media screen and (min-width: @screen-lg) {
            padding-top: @perc;
        }
    }
}