图像高度取决于文本

我想要做的是使背景图像的高度变化取决于文本的数量。图像高度取决于文本

ex。图片高度为100px，该div内的文字为150px。如何根据输入的文本数量将图像高度扩展到150px（或更多）？

HTML：

<div class="scroll-bg"> 
    <img src="img/scroll_top.gif" style="position:absolute" /> 
     <div class="scroll-bg-img"> 
     <div class="scroll-content"> 
     <center><img src="img/recent_news.gif" /></center> 
     <div style="width:100%;margin-top:15px"> 
      <div style="margin-top:10px;color:black"> 
      <p>TEXT TEXT TEXT TEXT MORE TEXT</p> 
      </div> 
     </div> 
     </div> 
    </div>  
</div>

CSS：

.scroll-bg { 
    width: 810px; 
    float: right; 
} 

.scroll-content { 
    width: 765px; 
    margin-left: 15px; 
    word-wrap: break-word; 
} 

.scroll-bg-img { 
    background-image: url(img/scroll_bg.gif); 
    background-repeat: repeat-y; 
    z-index: 1; 
    width: 795px; 
    height: 1000px; 
    margin-top: 40px; 
    margin-left: 7px; 
    padding-top: 15px; 
}

来源

2013-04-26 ShadyPotato

background-repeat: no-repeat; 
background-size: 100% 100%;

将导致背景延伸到适合的容器，但不会，只要你有.scroll-bg-img

明确height和width组如果您删除这些尺寸的文字，让它根据文本的高度来确定大小，背景图片将适合。

来源

2013-04-26 21:17:09

你可以在你的.scroll-bg-img CSS使用background-size : cover。但是，并非所有的浏览器都会支持这一点。只要看一看，看看它是什么。

编辑：

.scroll-bg-image { 
    background-image : url("img/scroll_bg.gif"); 
    background-position : center center; 
    background-repeat : no-repeat; 
    background-size : cover; 
}

更新背景属性本身，以及看看如何为你做。

来源

2013-04-26 21:09:49

这似乎搞砸了背景图片。如果我添加该属性，则其右侧一半被切断。 – ShadyPotato 2013-04-26 21:12:29

@ShadyPotato更新。试试看。 – 2013-04-26 21:15:36

图像高度取决于文本

回答

相关问题