背景圖像伸展Div的100％高度

Question

我有一個容器，根據動態放置在其中的文本數量，它將在高度上增長/縮小。 當容器改變高度時，容器將具有需要拉伸/收縮的背景圖像，並且不能以任何方式裁剪該圖像。 我想知道如何設置.container以使背景圖像保持100％的div。

我嘗試了以下，但它似乎沒有工作：

.container { background: url('backgroundImage.jpg') 0 100% no-repeat; }

HTML結構示例：

<div class="container">
  <p class="text">This is a short container</p>
</div>

<div class="container">
  <p class="text">This<br> is<br> a<br> tall<br> container</p>
</div>

Answer 1

您需要設置background-size屬性。 background-size: 100% 100%; 將它縮放以水平和垂直填充容器。

我通常喜歡background-size: cover; 因為它可以根據需要優雅地放大圖像，保持縱橫比。 請務必檢查背景大小的支持 ，因為它是一個相當新的屬性。

Answer 2

如果background-size: contain; 沒有幫助，如果你正在尋找完整的高度背景圖像而不失去寬高比，那么使用下面寫的CSS

background-size: auto 100%;

將第一個參數設置為“ auto ”將確保圖像保持寬度與當前高度的比率。 第二個參數“ 100％ ”將幫助背景圖像適應與DIV相同的高度。

Answer 3

你嘗試過background-size: cover; ？

在您的示例中，您正在調整background-position 。

Answer 4

css3中有一個名為background-size：cover; 和background-size：包含; 您可能想要使用background-size:cover; 滿足您的需求。

** contain

指定應將背景圖像縮放到盡可能大，同時確保其尺寸小於或等於背景定位區域的相應尺寸。

cover

指定應將背景圖像縮放到盡可能小，同時確保其尺寸大於或等於背景定位區域的相應尺寸。

**