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

【问题标题】：Background Image Stretch 100% Height of Div背景图像拉伸 100% 高度的 Div
【发布时间】：2012-11-23 19:36:23
【问题描述】：

我有一个容器，该容器的高度会根据动态放置在其中的文本数量而增长/缩小。容器将有一个背景图像，当容器改变高度时需要拉伸/收缩，并且该图像不能以任何方式裁剪。我想知道如何设置.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>

【问题讨论】：

css-tricks.com/perfect-full-page-background-image

标签： html css

【解决方案1】：

您需要设置background-size 属性。 background-size: 100% 100%; 将缩放它以水平和垂直填充容器。

我通常更喜欢background-size: cover;，因为它可以根据需要优雅地放大图像，同时保持纵横比。请务必检查 support 的背景大小，因为它是一个相当新的属性。

【讨论】：

CSS3 很好 :) 这正是我所需要的。

【解决方案2】：

如果background-size: contain; 没有帮助，并且如果您正在寻找完整的高度背景图片而不丢失宽高比，那么请使用下面的 CSS

background-size: auto 100%;

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

【讨论】：

我认为这个应该是正确的答案。它回答了问题并且有效（浏览器支持除外）。
我个人认为background-size: cover是正确答案。如果@henrik 的回答不起作用，我的回答只会有所帮助。但是，它应该在大多数情况下都有效。

【解决方案3】：

你试过background-size: cover;吗？

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

【讨论】：

【解决方案4】：

css3 中有一个属性叫做 background-size:cover;和背景大小：包含；。您可能想使用background-size:cover; 来满足您的需求。

**contain

指定背景图像应缩放到与可能同时确保其尺寸小于或等于背景定位区域的对应尺寸。

cover

指定背景图像应缩放到与可能同时确保其两个尺寸大于或等于到背景定位区域的对应尺寸。

【讨论】：