背景图像伸展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相同的高度.