為什么我的圖像超出了引導網格？

Question

我使用Bootstrap 4創建了3列網格，其中包含一些文本和圖像。

我注意到，盡管我的圖像分配了img-fluid類，但圖像在div之外溢出。

誰能解釋這個原因？

的HTML

  <div class="row">
    <div class="col blue-bg-outter">
      <div class="col blue-bg" style="height: 300px;">

        <!-- start of content -->
        <div class="row">
          <div class="col">
            <h2> Some line</h2>
          </div>
          <div class="col img-col">
            <img src="https://purepng.com/public/uploads/large/51508089516arw4tqfangou1wmvwzihlw7hxnzjujpulweq1otwrsdcsaxc5kvmu1crkpcyfxezyx4dmcvkbgg5w7oc1sioxib4j044tjwbfcyu.png" alt="" class="img-fluid">
          </div>
          <div class="col">
            <h2> Another line</h2>
          </div>
        </div>

      </div>
    </div>
  </div>

的CSS

.img-fluid {
  max-height: 100vh;
}

.blue-bg-outter { 
  padding: 60px;
}

.blue-bg { 
  background: #3ad7f7;
}

在實際頁面上可能更容易看到，請查看CodePen 。

Answer 1

因為您已將父div的高度設置為300px ，所以如果刪除高度，它會起作用。 或者您可以按照@august建議將img-fluid的高度設置為300px ：

<div class="col blue-bg">

https://codepen.io/anon/pen/oJKvLp

或者，您可以像這樣保持高度並停止圖像溢出：

.blue-bg
{
    overflow: hidden;
}