html - 图片的高度取决于文字

Question

我想做的是根据文本量改变背景图片的高度。

例如。图像高度为 100px，该 div 中的文本为 150px。如何根据输入的文本量将图像高度扩展到 150 像素(或更多)？

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;
}

Answer 1

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

将导致背景拉伸(stretch)以适合容器，但只要您在 .scroll-bg-img

如果你删除它们，并让它的大小适应文本的高度，背景图像将拉伸(stretch)以适合。