Question

我需要在我的网站上显示一张Bootstrap 4卡，其中包含一张响应式图像。我的HTML看起来像这样：

<div class="container">
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="card-header">
          Bootstrap 4 card
        </div>
        <div class="card-body">
          <img src="https://www.splendidbeast.com/wp-content/uploads/2017/10/Regal-Cat-resized.jpg" />
        </div>
      </div>
    </div>
  </div>
</div>

我的CSS看起来像这样：

.card-body {
    height: calc(100vh - 200px);
}

.card-body > img {
    max-height: 100%;
    max-width: 100%;
}

JSFiddle可以在这里找到： https://jsfiddle.net/roelgeusens/064ebmvk/

我在卡体上添加了计算高度。减小窗口高度和宽度时，图像会正确调整大小。这就是我想要实现的目标，但对于我的现实生活中的例子来说还不够。我的卡片头可以得到任何尺寸，我需要能够在整个面板上定义高度，所以我想移动高度：calc（100vh - 200px）样式从卡体div到我的卡片div。我的CSS看起来像这样：

.card {
    height: calc(100vh - 200px);
}

.card-body > img {
    max-height: 100%;
    max-width: 100%;
}

当我这样做时（只需将.card-body css样式更改为.card），max-height：100％样式在图像上不再有效。

JSFiddle可以在这里找到：https://jsfiddle.net/roelgeusens/rw1rhjnt/

任何可以帮助我的人？

卡片调整大小的Bootstrap 4图像

0 个答案: