如何使Bootstrap卡中的图像具有相同的高度/宽度? [英] How to get images in Bootstrap's card to be the same height/width?

问题描述

这是我的代码，它显示6张卡片，三张横排两行.我希望图像都具有相同的大小，而不必手动调整图像的大小.响应能力确实有效，我使用"img-fluid"作为类，当我使用移动或更小的浏览器时，它们的宽度相同，但是高度仍然不高.

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.

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

推荐答案

在CSS中尝试以下方法:

Try this in your css:

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

根据需要调整高度vw. object-fit:cover 启用缩放功能，而不是图像拉伸功能.

Adjust the height vw as you see fit. The object-fit: cover enables zoom instead of image stretching.

这篇关于如何使Bootstrap卡中的图像具有相同的高度/宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！