CSS背景图片+跨度图像如何填满整个DIV？

Question

我有一个包含个人资料信息的DIV，该DIV的大小因人而异。我想在DIV上运行一个背景图像，并希望它根据资料长度进行调整大小。

我尝试了以下方法：

 <div id="profileThemeWrapper"></div>

CSS

 div#profileThemeWrapper {
    background: url(../images/online-dating-main/themes/heart-theme.jpg) no-repeat;
 }

这并不能帮助调整大小 - 它只是按原样显示图像。

我也尝试了使用<img>标签，但发现当我使用它时，图像不会在文本下面运行。

有没有一种方法可以在一个大小会改变的DIV后面运行图像，并且使图像随着DIV大小的变化而调整大小？

谢谢。

- Adam

Answer 1

#background
{
  width:auto;
  height:auto;
  background: url(/images/special_offer.png);
  background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%; /*  Safari  */
    -khtml-background-size: 100% 100%; /*  Konqueror  */
    -moz-background-size: 100% 100%; /*  Firefox  */
}

请试一下：http://jsfiddle.net/rqVU6/ 调整宽度或高度后可以看到效果，在您的代码中，你可能需要去掉宽度和高度属性，因为您有一个非固定比例的div。这里有一个带有内容和自动宽度的示例：http://jsfiddle.net/rqVU6/1/。

希望这对您有所帮助。

- rmagnum2002

Answer 2

在这里，我也使用了inline-block来固定它。

.oe_field_legend_star {
 background-image: url(web/static/src/img/icons/star-on.png);
 width: 15px;
 height: 15px;
 display: inline-block;} 

这个非常棒，由于display:block会产生问题，因此没有新的行：

- Tejas Tank

Answer 3

使用CSS2无法调整背景图片的大小。

不过，您可以使用CSS3 进行调整。

- Diodeus - James MacFarlane

Answer 4

var target = document.getElementById("profileThemeWrapper");
var wd = target.scrollWidth;
var hd = target.scrollHeight;

这个应该返回 DIV 的 “真实” 大小（即使它被裁剪了）。然后，您可以使用这些值来调整图像的大小。

- Jon Lennart Aasenden