所以这是我的代码，它显示6张牌，三张牌和两张牌。我想要的图像都是相同的大小，而无需手动调整图像大小。响应性确实有效，我使用“img-fluid”作为一个类，当我使用移动设备或更小的浏览器时，它们都具有相同的宽度，但高度仍然是关闭的。
<h1 class="display-4 text-xs-center m-y-3 text-muted" id="speakers">Ice Cream</h1>
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/brownie.jpg" />
<div class="card-block">
<h4 class="card-title">Brownie Delight</h4>
<p class="card-text">Our customer favorite chocolate ice cream jam packed with pieces of brownies and fudge</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/butterPecan.jpg" />
<div class="card-block">
<h4 class="card-title">Butter Pecan</h4>
<p class="card-text">Roasted pecans, butter and vanilla come together to make this wonderful ice cream</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/bCherry.jpg" />
<div class="card-block">
<h4 class="card-title">Black Cherry</h4>
<p class="card-text">Our classic vanilla loaded with plump black cherries to give flavor and color</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/mintChip.jpg" />
<div class="card-block">
<h4 class="card-title">Mint Chip</h4>
<p class="card-text">Our signiture mint ice cream jam packed with mint chocolate chips</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/pistachio.jpg" />
<div class="card-block">
<h4 class="card-title">Pistachio</h4>
<p class="card-text">Our classic pistachio is loaded with nuts to give it that great flavor, and of course comes in your favorite color</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/IceCream.jpg" />
<div class="card-block">
<h4 class="card-title">More Flavors</h4>
<p class="card-text">We couldn not fit all of our wonderful flavors on one page, click here to see more!</p>
</div>
</div>
</div>
</div>
答案 0 :(得分：53)
在你的css中试试这个：
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
根据需要调整高度vw。 object-fit：cover 启用缩放而不是图像拉伸。
答案 1 :(得分：8)
.card-img-top {
width: 100%;
height: 40vh;
object-fit: cover;
}
如上所示，但是当您添加高度时，我建议使用“ vh”（视口高度单位）以获得更适合移动设备的体验。
答案 2 :(得分：6)
.card-img-top {
height: 15rem;
object-fit: cover;
}
答案 3 :(得分：4)
答案 4 :(得分：3)
我使用Bootstrap 4 Emdeds实用程序解决了这个问题
https://getbootstrap.com/docs/4.3/utilities/embed
在这种情况下，您只需要像这样将图像添加到div.embbed-responsive：
<div class="card">
<div class="embed-responsive embed-responsive-16by9">
<img alt="Card image cap" class="card-img-top embed-responsive-item" src="img/butterPecan.jpg" />
</div>
<div class="card-block">
<h4 class="card-title">Butter Pecan</h4>
<p class="card-text">Roasted pecans, butter and vanilla come together to make this wonderful ice cream</p>
</div>
</div>
所有图像均符合修饰符类指定的比例：
.embed-responsive-21by9 .embed-responsive-16by9 .embed-responsive-4by3 .embed-responsive-1by1 另外，此CSS启用缩放功能而不是图像拉伸
.embed-responsive .card-img-top {
object-fit: cover;
}
答案 5 :(得分：3)
我发现以下内容适用于使用卡和网格系统进行的设置。我将card-image-top类的flex-grow属性设置为1，将包含该对象的对象设置为包含该对象，将主体的flex-grow属性设置为0。
HTML
<div class="container-fluid">
<div class="row row-cols-2 row-cols-md-4">
<div class="col mb-4">
<div class="card h-100">
<img src="https://i0.wp.com/www.impact-media.be/wp-content/uploads/2019/09/placeholder-1-e1533569576673-960x960.png" class="card-img-top">
<div class="card-body">
<p class="card-text">Test</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="http://www.nebero.com/wp-content/uploads/2014/05/placeholder.jpg" class="card-img-top">
<div class="card-body">
<p class="card-text">Test</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="http://www.nebero.com/wp-content/uploads/2014/05/placeholder.jpg" class="card-img-top">
<div class="card-body">
<p class="card-text">Test</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="https://i0.wp.com/www.impact-media.be/wp-content/uploads/2019/09/placeholder-1-e1533569576673-960x960.png" class="card-img-top">
<div class="card-body">
<p class="card-text">Test</p>
</div>
</div>
</div>
</div>
</div>
CSS
.card-img-top {
flex-grow: 1;
object-fit:contain;
}
.card-body{
flex-grow:0;
}
答案 6 :(得分：2)
我在Bootstrap 4中使用与媒体查询相同的断点来“手动”操作...
/* Equal-height card images, cf. https://stackoverflow.com/a/47698201/1375163*/
.card-img-top {
/*height: 11vw;*/
object-fit: cover;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
.card-img-top {
height: 19vw;
}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
.card-img-top {
height: 16vw;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
.card-img-top {
height: 11vw;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 992px) {
.card-img-top {
height: 11vw;
}
}
它可以工作，尽管我希望这种响应方式更加自然。
@ sepuckett86和我的部分建议。
答案 7 :(得分：1)
我不相信你可以不裁剪它们，我的意思是你可以通过使用jquery使div具有相同的高度，但这不会使图像大小相同。
你可以看一下使用Masonry，这会让它看起来不错。
答案 8 :(得分：1)
您可以使用这种样式解决此问题。
<div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/butterPecan.jpg" style="width: 18rem; height: 20rem;" />
答案 9 :(得分：1)
.card-img-top {
width: 100%;
height: 30vh;
object-fit: contain;
}
包含将有助于使完整图片显示在Card中。
根据您的需要调整高度“ 30vh”！
答案 10 :(得分：0)
每个图像在放置之前都需要是精确的尺寸，否则bootstrap 4会尝试将它们放在一个时髦的形状中。 Bootstrap在他们的文档上也有类似Masonry的东西，如果需要你可以使用，你可以在这里看到http://v4-alpha.getbootstrap.com/components/card/#columns。
答案 11 :(得分：0)
我解决了这些问题：
.card-img-top {
max-height: 20vh; /*not want to take all vertical space*/
object-fit: contain;/*show all image, autosized, no cut, in available space*/
}