Html 如何使 Bootstrap 卡中的图像具有相同的高度/宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37287153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get images in Bootstrap's card to be the same height/width?
提问by Renuz
So here is my code, it displays 6 cards, three across and two rows. I would like for the images to all be the same size without having to manually resize the images. The responsiveness does work, I use "img-fluid" as a class and when I go to a mobile or smaller browser, they all have the same width, but the height is still off.
所以这是我的代码，它显示 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>
Here is an imageof what I am getting and this is what I want to getwhere they are all the same size.
回答by sepuckett86
Try this in your css:
在你的 css 中试试这个：
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
Adjust the height vw as you see fit. The object-fit: coverenables zoom instead of image stretching.
根据您的需要调整高度 vw。该对象的配合：盖功能，变焦，而不是图像的拉伸。
回答by Pelerano
I solved this problem using Bootstrap 4 Emdeds Utilities
我使用 Bootstrap 4 Emdeds Utilities 解决了这个问题
https://getbootstrap.com/docs/4.3/utilities/embed
https://getbootstrap.com/docs/4.3/utilities/embed
In this case you just need to add you image to a div.embbed-responsivelike this:
在这种情况下，您只需要将您的图像添加到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>
All images will fit the ratio specified by modifier classes:
所有图像都将符合修饰符类指定的比率：
.embed-responsive-21by9.embed-responsive-16by9.embed-responsive-4by3.embed-responsive-1by1
.embed-responsive-21by9.embed-responsive-16by9.embed-responsive-4by3.embed-responsive-1by1
Aditionally this css enables zoom instead of image stretching
另外这个 css 启用缩放而不是图像拉伸
.embed-responsive .card-img-top {
object-fit: cover;
}
回答by Dimitar Milushev
.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.
如上所示，但当您添加高度时，我建议使用“vh”（视口高度单位）以获得更适合移动设备的体验。
回答by Jeremy Lynch
.card-img-top {
height: 15rem;
object-fit: cover;
}
回答by maxisam
it is a known issue
这是一个已知问题
I think the workaround should be set it as
我认为解决方法应该将其设置为
.card-img-top {
width: 100%;
}
回答by Robert Andrews
I went with "manually" using the same breakpoints in Bootstrap 4 as media queries...
我“手动”使用了 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;
}
}
It works, though I wish there were more native responsiveness of this sort.
它有效，但我希望有更多这种本机响应。
Partial suggestion from @sepuckett86 and I.
@sepuckett86 和我的部分建议。
回答by Plamen Nikolov
I found the below works for my setup using cards and grid system. I set the flex-grow property of card-image-top class to 1 and the object fit on the same to contain and the flex-grow property of the body to 0.
我发现以下内容适用于我使用卡片和网格系统的设置。我将 card-image-top 类的 flex-grow 属性设置为 1，将对象放在同一个容器上，将 body 的 flex-grow 属性设置为 0。
HTML
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
CSS
.card-img-top {
flex-grow: 1;
object-fit:contain;
}
.card-body{
flex-grow:0;
}
回答by Michael Mano
I dont believe you can without cropping them, I mean you could make the divs the same height by using jquery however this will not make the images the same size.
我不相信你可以不裁剪它们，我的意思是你可以通过使用 jquery 使 div 具有相同的高度，但这不会使图像具有相同的大小。
You could take a look at using Masonry which will make this look decent.
你可以看看使用 Masonry 这将使这看起来不错。
回答by Renuz
Each of the images need to be the exact dimensions before you put them up otherwise bootstrap 4 will try to place them in a funky shape. Bootstrap also has something like Masonry on their documents that you can use if need be, you can see that here, http://v4-alpha.getbootstrap.com/components/card/#columns.
每个图像在放置之前都需要具有精确的尺寸，否则引导程序 4 会尝试将它们放置在一个时髦的形状中。Bootstrap 在他们的文档中也有类似 Masonry 的东西，你可以在需要时使用，你可以在这里看到，http://v4-alpha.getbootstrap.com/components/card/#columns。
回答by Olgu Dulger
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;" />
