Question

我有一个包含个人资料信息的DIV，每个人的DIV大小也不同。我想在DIV下运行背景图像，并希望根据配置文件的长度调整大小。

我尝试了以下内容：

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

CSS

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

这根本没有帮助调整大小 - 它只是按原样显示图像。

我也试过这个标签，并发现当我使用它时，图像不会在文本下运行。

有没有办法在DIV后面运行一个尺寸会改变的图像，并且图像会根据DIV的大小调整大小？

THX

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 。这里有一个示例，其中内容和宽度为auto：http://jsfiddle.net/rqVU6/1/ 我希望这能以某种方式帮助你。

Answer 2

这里我也修了一下，它带有内联块。

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

这很有效，没有新行作为显示：阻止一些如何制作问题，

Answer 3

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

你虽然can do it using CSS3。

Answer 4

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

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

CSS背景图像+跨度图像整个DIV大小

4 个答案: