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;，因为它可以根据需要优雅地缩放图像，保持纵横比。请务必检查support的背景大小，因为它是一个相当新的属性。

Answer 2

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

background-size: auto 100%;

将第一个参数设置为“自动”将确保图像保持宽度与当前高度的比率。第二个参数“ 100％”将帮助背景图像调整与DIV相同的高度。

Answer 3

你试过background-size: cover;吗？

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

Answer 4

css3中有一个属性叫做background-size：cover;和background-size：包含;您可能希望使用background-size:cover;来满足您的需求。

** contain

指定应将背景图像缩放为大小可以确保其尺寸小于或等于背景定位区域的相应尺寸。

cover

指定应将背景图像缩放为小到可以确保其尺寸大于或等于到背景定位区域的相应尺寸。

**

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

4 个答案: