背景图像拉伸至Div的100%高度

Question

我有一个容器，根据放置在其中的文本量动态增长/缩小高度。该容器将具有需要随着容器高度变化而拉伸/缩小的背景图像，并且这个图像不能被任何方式裁剪。我想知道如何对.container进行样式设置，以使背景图像始终保持div的100%。

我尝试了以下方法，但似乎没有起作用：

.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>

- Jon

---

http://css-tricks.com/perfect-full-page-background-image/ - Matheus Azevedo

Answer 1

你需要设置 background-size 属性。 background-size: 100% 100%; 将其水平和垂直填充容器。

我通常更喜欢 background-size: cover;，因为它会根据需要优雅地扩展图像，保持纵横比。请务必检查对 background-size 的支持情况，因为它是一个相当新的属性。（支持情况）

- Henrik

---

CSS3很好 :) 它完全做到了我所需要的。 - Jon

Answer 2

如果background-size: contain;不能满足您的要求，并且您正在寻找具有完整高度的背景图像而不会失去纵横比，则请使用下面写的CSS。

background-size: auto 100%;

将第一个参数设置为"auto"将确保图像的宽度与当前高度成比例。 第二个参数"100%"将帮助背景图片适应与DIV相同的高度。

- Nizam Kazi

---

我认为这应该是正确的答案。它回答了问题并且它能够工作（浏览器支持除外）。 - Marco Panichi

我个人认为 background-size: cover 是正确的答案。如果 @henrik 的答案不起作用，我的答案可能会有所帮助。但是，在大多数情况下，它应该是有效的。 - Nizam Kazi

Answer 3

你试过 background-size: cover; 吗？

在你的例子中，你正在调整 background-position。

- gregory

Answer 4

在CSS3中有一个叫做background-size:cover;和background-size:contain;的属性。你可能希望使用background-size:cover;来满足你的需求。

**contain
指定背景图像应缩放为尽可能大，同时确保其两个维度小于或等于背景定位区域的相应维度。

cover

规定背景图片应该被缩放到尽可能小，同时确保它的两个维度都大于或等于背景定位区域的对应维度。

- defau1t