Fixed thumbnail size & maintaining aspect ratio of image? - Bootstrap 4

Question

I want this result as shown in image.
I want to use Twitter Bootstrap 4's "card" tag.
The image sizes in thumbnail are different but the size of card should remain same. Image should be scaled down maintaining its aspect ratio.
Here, I found these tricks & CSS codes: same question on StackOverflow and my trial based on it (without "card" tag), but I want to use it with Bootstrap 4's "card" tag.

HTML

<div class="container">
        <div class="row">
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-12 thumbnailContainer">
                <div class="productThumb">
                    <div class="img-wrapper">
                        <div class="thumb">
                            <img src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg">
                        </div>
                    </div>
                </div>
                <div class="productDetails">
                    <hr>
                    <h5 class="card-title">Caption</h5>
                    <p>Short Description goes here<a class="btn btn-info btn-sm float-right" href="#">Details</a></p>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-12 thumbnailContainer">
                <div class="productThumb">
                    <div class="img-wrapper">
                        <div class="thumb">
                            <img src="https://medsell.in/public/profilepics/mOM0201011D1491339837.JPG">
                        </div>
                    </div>
                </div>
                <div class="productDetails">
                    <hr>
                    <h5 class="card-title">Caption</h5>
                    <p>Short Description goes here<a class="btn btn-info btn-sm float-right" href="#">Details</a></p>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-12 thumbnailContainer">
                <div class="productThumb">
                    <div class="img-wrapper">
                        <div class="thumb">
                            <img src="http://www.gettyimages.com/CMS/Pages/ImageCollection/StaticContent/image1_%20164248809.jpg">
                        </div>
                    </div>
                </div>
                <div class="productDetails">
                    <hr>
                    <h5 class="card-title">Caption</h5>
                    <p>Short Description goes here<a class="btn btn-info btn-sm float-right" href="#">Details</a></p>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-12 thumbnailContainer">
                <div class="productThumb">
                    <div class="img-wrapper">
                        <div class="thumb">
                            <img src="https://medsell.in/public/profilepics/mNitrile%20Examination%20Gloves1494490822.png">
                        </div>
                    </div>
                </div>
                <div class="productDetails">
                    <hr>
                    <h5 class="card-title">Caption</h5>
                    <p>Short Description goes here<a class="btn btn-info btn-sm float-right" href="#">Details</a></p>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-12 thumbnailContainer">
                <div class="productThumb">
                    <div class="img-wrapper">
                        <div class="thumb">
                            <img src="http://fakeimg.pl/500x330/ccc/">
                        </div>
                    </div>
                </div>
                <div class="productDetails">
                    <hr>
                    <h5 class="card-title">Caption</h5>
                    <p>Short Description goes here<a class="btn btn-info btn-sm float-right" href="#">Details</a></p>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-12 thumbnailContainer">
                <div class="productThumb">
                    <div class="img-wrapper">
                        <div class="thumb">
                            <img src="http://upload.wikimedia.org/wikipedia/commons/f/f5/Poster-sized_portrait_of_Barack_Obama.jpg">
                        </div>
                    </div>
                </div>
                <div class="productDetails">
                    <hr>
                    <h5 class="card-title">Caption</h5>
                    <p>Short Description goes here<a class="btn btn-info btn-sm float-right" href="#">Details</a></p>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-12 thumbnailContainer">
                <div class="productThumb">
                    <div class="img-wrapper">
                        <div class="thumb">
                            <img src="http://fakeimg.pl/500x330/ccc/">
                        </div>
                    </div>
                </div>
                <div class="productDetails">
                    <hr>
                    <h5 class="card-title">Caption</h5>
                    <p>Short Description goes here<a class="btn btn-info btn-sm float-right" href="#">Details</a></p>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-6 col-12 thumbnailContainer">
                <div class="productThumb">
                    <div class="img-wrapper">
                        <div class="thumb">
                            <img src="http://fakeimg.pl/500x330/ccc/">
                        </div>
                    </div>
                </div>
                <div class="productDetails">
                    <hr>
                    <h5 class="card-title">Caption</h5>
                    <p>Short Description goes here<a class="btn btn-info btn-sm float-right" href="#">Details</a></p>
                </div>
            </div>
        </div>
    </div>

CSS

.productThumb {
    display: block;
    margin: 100%;
}
.img-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: 1px solid #ddd;
    border-radius: 0.4em;
    margin: 0.2em;
}
.img-wrapper .thumb {
    height:150%;
}
.thumb {
    display: block;
    padding: 0.4em;
}
.thumb img {
    position: relative;
    top: 25%;
    left: 50%;
    max-width: 100%;
    max-height: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    border-radius: 0.4em;
}
.productDetails {
    display: block;
    z-index: 100000;
}

I don't know how to achieve that result. Please help.
Thank you in advance.

Answer 1

Finally I found the solution.
JSFiddle
I added following code to card's image div:

<div class="productImage">
    <div class="img-wrapper">
        <a class="thumb" href="#">
            <img src="https://medsell.in/public/profilepics/mgoggle-punk1494489545.jpg">
        </a>
    </div>
</div>

So my final card tag is as follows:

<div class="card">
    <div class="card-img-top">
        <div class="productImage">
            <div class="img-wrapper">
                <a class="thumb" href="#">
                    <img src="https://medsell.in/public/profilepics/mgoggle-punk1494489545.jpg">
                </a>
            </div>
        </div>
    </div>
    <div class="card-block">
        <h5 class="card-title"><a href="#">Product Name</a></h5>
        <div class="card-text">
                            for Product category &#45; sub-category
        </div>
    </div>
    <div class="card-footer">
        <small><a class="card-footer-link" href="#">Seller's Name</a></small>
        <a class="btn btn-info float-right btn-sm" href="#">Details</a>
    </div>
</div>

And my changed CSS looks like this:

.productImage {
    position: relative;
    float: left;
    display: inline-block;
}
.productImage {
    width: 100%;
}
.productImage:after {
    padding-top: 100%;
    display: block;
    content:'';
}
.img-wrapper {
    padding: 10px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.img-wrapper .thumb {
    height:100%;
}
.img-project, .thumb {
    display: block;

}
.img-project img, .thumb img {
    position:relative;
    top:50%;
    left:50%;
    max-width:100%;
    max-height:100%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.productDetails {
}
/************************************************
Media queries
************************************************/
 @media all and (max-width: 1024px) {
    .img-project, .thumb {
        padding: 7px;
    }
}

Here is the final fiddle link: https://jsfiddle.net/kirtan3d/pjq4op89/1/