html - 固定缩略图大小并保持图像的纵横比？ - Bootstrap 4

Question

我希望这个结果为 shown in image .
我想使用 Twitter Bootstrap 4 的“卡片”标签。
缩略图中的图像尺寸不同，但卡片的尺寸应保持不变。图片应按比例缩小以保持其纵横比。
在这里，我找到了这些技巧和 CSS 代码:same question on StackOverflow和 my trial based on it (without "card" tag) ，但我想将它与 Bootstrap 4 的“card”标签一起使用。

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;
}

我不知道如何实现该结果。请帮忙。
提前谢谢你。

Answer 1

终于找到解决办法了。
JSFiddle
我在卡片的图像 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>

所以我最终的卡片标签如下:

<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>

我更改后的 CSS 如下所示:

.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;
    }
}

这是最后的 fiddle 链接:https://jsfiddle.net/kirtan3d/pjq4op89/1/