如何让 Bootstrap 卡中的图像具有相同的高度/宽度？

这是我的代码，它显示6张牌，三张横跨两行。我希望所有的图像都是相同的大小，而不必手动调整图像的大小。这种响应确实有效，我使用“ img-flow”作为一个类，当我使用移动设备或者更小的浏览器时，它们都有相同的宽度，但是高度仍然是关闭的。

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

这是我得到的 形象，这是我想要的 get，他们都是相同的大小。

245190 次浏览
小开

我不相信你可以不裁剪他们，我的意思是你可以使 div 相同的高度使用 jquery 然而，这将不会使图像相同的大小。

你可以看看使用砌体，这将使这看起来体面。

Http://masonry.desandro.com/

小开

每个图像需要准确的尺寸之前，你把他们否则引导4将尝试把他们放在一个时髦的形状。Bootstrap 在他们的文档中也有类似的东西，你可以在需要的时候使用，你可以在这里看到，http://v4-alpha.getbootstrap.com/components/card/#columns。

小开

是 known issue

我认为变通方案应该设置为

.card-img-top {
width: 100%;
}
小开

在你的 css 里试试这个:

.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}

根据您的需要调整大众汽车的高度。 适合的物体: 盖子支持缩放而不是图像拉伸。

小开 
.card-img-top {
height: 15rem;
object-fit: cover;
}
小开

我选择“手动”使用与 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和我。

小开 
.card-img-top {
width: 100%;
height: 40vh;
object-fit: cover;
}

As shown above but when you add height i suggest using "vh" (Viewport Height units) for a more mobile-friendly experience.

小开

我使用 Bootstrap 4 Embed 实用程序解决了这个问题

https://getbootstrap.com/docs/4.3/utilities/embed

在这种情况下，您只需要将您的图像添加到像下面这样的 div.embed-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;
}
小开

you can fix this problem with style like this.

<div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/butterPecan.jpg" style="width: 18rem; height: 20rem;" />
小开

我发现下面的工程为我的设置使用卡片和网格系统。我将 card-image-top 类的 flex-growth 属性设置为1，并将该类上的对象设置为容纳，将 body 的 flex-growth 属性设置为0。

超文本标示语言

<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;
}
小开 
.card-img-top {
width: 100%;
height: 30vh;
object-fit: contain;
}

包含将有助于获得完整的图像显示在卡内。

根据您的需要调整高度“30vh”！

小开

我用这些解决了问题:

.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*/
}
小开

使用“ mh-100”将图像的最大高度设置为100% ，并将其嵌套在具有固定高度的父级中。

<div class="text-center" style="height: 10rem">
<img src="https://..." class="img-fluid mh-100" >
</div>
小开

我用这些解决了问题:

<div class="card **border-0 p-0**">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

提交答案