prevent-cls-on-images.scss

.wrapper-class {
    display: block;
    position: relative;
    overflow: hidden;
    height: 0;
    
    // Give parent container a percentile padding to top, to reserve place of image.
    // Then just position the child element (image) absolute.
    // height px / width px * 100 = ratio in %
    // e.g: 536 / 1024 * 100 = 52,344%
    padding-top: 52.344%;
    
    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; // Optional: if some images of your collection does have a different ratio 
    }
}