Html 固定缩略图大小&；保持图像的纵横比引导程序4

我想要这个结果。
我想使用Twitter Bootstrap 4的“卡片”标签。
缩略图中的图像大小不同，但卡的大小应保持不变。图像应缩小，以保持其纵横比。
在这里，我找到了这些技巧&CSS代码：和，但我想将其与bootstrap4的“card”标记一起使用。

HTML 我不知道如何达到那个结果。请帮忙。

---

提前谢谢。

我终于找到了解决方案。

我在卡的图像分区中添加了以下代码：

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

---

这是最后一个fiddle链接：

这是引导卡的链接，如果您共享JSFIDLE测试，那么我们可以分析布局问题。嗨，Vishal，这是我创建的JSFIDLE。这两种fiddle解决方案都很好，但您还必须考虑浏览器兼容性。列计数支持IE10+。而对于物品清单来说，这两种设计都是好的，就像根据产品的高度而有所不同一样。

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

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

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