Bootstrap Responsive Image Aspect Ratio

Question

I am working with a third party website which allows me to modify code to suit my needs. I have a product page with responsive columns. Administrative users can upload images for the products which end users can order. I've set it so the images are responsive as well, but because the product images are not all the same aspect ratio, I have some items which are taller than others, making the page leave spaces in the column blank. I want the images to stay responsive and keep their aspect ratio, but have the containers they are in all have the same height and responsive width. Changing max-height and min-height just gives the same response as setting height. How do I do that while keeping the width correct?

<div class="col-xs-12 text-center">
        <div class="well text-center">
        <href="product/{{LineItem.Product.InteropID}}">
            <figure ng-show="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl" >
                <img class="img-responsive" style="max-height: 200px; min-height: 200px; width: auto; margin: auto;" ng-src="{{LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl}}"/>
            </figure>
            <div class="empty" ng-hide="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl">
                <span class="fa empty"><i class="fa fa-camera"></i></span>
            </div>
        </a>
        </div>
       </div>

Answer 1

The best solution would be to force users to upload an image of a certain height/width, but barring that, you could just put the responsive images inside of a div that has a fixed size and it's css overflow property set to hidden.

<figure ng-show="LineItem.Variant.SmallImageUrl ||  LineItem.Product.SmallImageUrl" >

    <div style="height:200px; width:200px;overflow:hidden;">

      <img class="img-responsive" ng-src="{{LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl}}"/>

    </div>

</figure>

Now, the image is fully responsive, but any portions of it that are bigger than its container will be clipped.

Answer 2

HTML

<div class="img-wrap ratio-4-3">
    <div class="img-content">
        <img src="https://picsum.photos/200" />
    </div>
</div>

SCSS

.img-wrap{
    position: relative;
    .img-content{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        > img{
            max-width: 100%;
            max-height: 100%;
            width: auto;
        }
    }
    &.ratio-4-3{
        padding-top: 75%;
    }
    &.ratio-16-9{
        padding-top: 56.25%;
    }
    &.ratio-3-2{
        padding-top: 66.66%;
    }
    &.ratio-8-5{
        padding-top: 62.5%;
    }
}

https://jsfiddle.net/huypn/pcwudrmc/25813/