1

我需要在我的网站上展示一张 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/

我在卡体上添加了一个计算出的高度。减小窗口高度和宽度时，图像会正确调整大小。这是我想要实现的目标，但对于我的现实生活示例来说还不够。我的卡片标题可以是任何大小，我需要能够在整个面板上定义高度，所以我想将 height: 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/

谁能帮助我？

4

0 回答 0