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

Question

所以这是我的代码,它显示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>

这是我得到的图像,这就是我想要得到的大小相同的图像.

Answer 1

在你的CSS中尝试这个:

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

根据需要调整高度vw.该对象的配合:盖功能,变焦,而不是图像的拉伸.

Answer 2

我使用Bootstrap 4 Emdeds Utilities解决了这个问题

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

Answer 3

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

如上所示，但是当您增加高度时，我建议您使用“ vh”（视口高度单位）以获得更适合移动设备的体验。

Answer 4

.card-img-top {
width: 100%;
height: 30vh;
object-fit: contain;
}

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

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

Answer 5

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

Answer 6

这是一个已知问题

我认为解决方法应将其设置为

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

Answer 7

我“手动”使用了 Bootstrap 4 中与媒体查询相同的断点...

/* Equal-height card images, cf. /sf/answers/3338874101/*/
.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 和我的部分建议。

Answer 8

我不相信你可以不裁剪它们，我的意思是你可以使用 jquery 使 div 具有相同的高度，但这不会使图像具有相同的大小。

你可以看看使用 Masonry，这会让它看起来不错。

http://masonry.desandro.com/