19

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

4 回答 4

44

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

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

于 2012-11-23T19:40:36.753 回答
17

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

background-size: auto 100%;

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

于 2015-08-02T13:02:20.680 回答
4

你试过了background-size: cover;吗？

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

于 2012-11-23T19:40:05.873 回答
3

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

**contain

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



cover

指定背景图片在保证两个尺寸都大于或等于背景定位区域对应尺寸的情况下，应尽可能缩小。

**

于 2012-11-23T19:46:21.330 回答