如何使 Bootstrap 卡片中的图像具有相同的高度/宽度？答案

【问题标题】：How to get images in Bootstrap's card to be the same height/width?如何使 Bootstrap 卡片中的图像具有相同的高度/宽度？
【发布时间】：2016-09-14 04:54:48
【问题描述】：

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

这是我得到的image，这是我想要的get，它们的大小都相同。

【问题讨论】：

请也发布您的 CSS
是Bootstrap，我没有用卡片修改任何东西的css页面，只有单独的东西。这是我在 index.html 上使用的。 maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/…" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
查看此链接：stackoverflow.com/questions/56437535/…

标签： html css image twitter-bootstrap

【解决方案1】：

在你的 CSS 中试试这个：

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

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

【讨论】：

这是一个了不起的答案。非常感谢。很多人都可以从中受益。
@RobertAndrews 您可以使用这些响应式断点在较小的屏幕尺寸下增加高度 vw：getbootstrap.com/docs/4.1/layout/overview/…
@AliGajani，现在是 2020 年，可能停止使用和支持 IE 吗？
你支持的时间越长，人们就越不会放弃使用它。如果他们坚持使用默认的 windows 浏览器，那么 Edge 可以做到这一点，它比旧的 IE 好得多。
@metabuddy 我同意，不支持 IE 有助于让世界变得更美好。

【解决方案2】：

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

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

【讨论】：

我想知道为什么 Bootstrap 没有在 embed-responsive-item 类中包含 object-fit:cover？
谢谢！这太完美了！
我希望我能投票两次，这解决了很多令人头疼的问题
如果你想在 BootStrap 5 中使用它，请参考：getbootstrap.com/docs/5.0/helpers/ratio

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

我在 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 和我的部分建议。

【讨论】：

工作就像一个魅力！谢谢

【解决方案7】：

这是一个known issue

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

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

【讨论】：

【解决方案8】：

我发现以下适用于我使用卡片和网格系统的设置。我将 card-image-top 类的 flex-grow 属性设置为 1，对象适合包含在其上，body 的 flex-grow 属性设置为 0。

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

.card-img-top {
    flex-grow: 1;
    object-fit:contain;
}
.card-body{
    flex-grow:0;
}

【讨论】：

【解决方案9】：

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

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

http://masonry.desandro.com/

【讨论】：

【解决方案10】：

你可以用这样的风格解决这个问题。

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

【讨论】：

工作就像一个魅力：style="width: 18rem; height: 20rem;"

【解决方案11】：

我用这些解决了：

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

【讨论】：

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

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

【讨论】：