如何将Bootstrap卡中的图像设置为相同的高度/宽度？

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张卡,3对,2行。我想要的图像都是相同的大小,而无需手动调整图像大小。响应性确实有效,我使用“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 image of what I am getting and this is what i want to get where they are all the same size.

这是我得到的图像,这是我想要得到的大小相同的地方。

5 个解决方案

#1

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: cover enables zoom instead of image stretching.

根据需要调整高度vw。物体贴合:封面可以进行缩放而不是图像拉伸。

#2

it is a known issue

这是一个众所周知的问题

I think the workaround should be set it as

我认为解决方法应该设置为

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

#3

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

#4

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,这会让它看起来像样。

http://masonry.desandro.com/

#5

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.

在你把它们放好之前,每个图像都需要是精确的尺寸,否则bootstrap 4会尝试将它们放在一个时髦的形状中。 Bootstrap在他们的文档上也有类似Masonry的东西,如果需要你可以使用,你可以在这里看到,http://v4-alpha.getbootstrap.com/components/card/#columns。

#1