Mixin to create a background image with fixed ratio (like square) in all devices

mixin_ratio_background_image.scss

@mixin image-aspect($ratio) {
    position: relative;
    height: auto;
    display: block;

    &:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: percentage(1/$ratio);
    }

    > a,
    > .bg-image {
        background-size: cover;
        position: absolute;
        height: auto !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

// Usage: h - image height; w - image width

.bg-image {
    @include image-aspect(h/w);
}

// HTML
// <div class="gallery">
//   <div class="item">
//     <div class="bg-image" style="background-image: url('');"></div>
//   </div>
// </div>