Question

我在我的网页上添加了一个图像（它是一个漂亮的彩绘盒子类型的东西矩形）。我在上面写了一些文字。

现在，当我在较小分辨率的屏幕中打开它时，文本是垂直打开的。我想停止这一点，并根据文字使得慢跑盒（我的意思是这里div）可以垂直伸展。

有没有简单的方法来实现这个目标？

编辑：正文标记就像这样

<body>
<div .class="container">
    <img src="pic.jpg" class="pic" alt="">
    <h2>some lenghty text</h2>
</body>

，CSS就在这里

.pic {
    /* because as the pic is very large and need to center that */
    width:40%; 
    margin-right:auto;
    margin-left:auto;
    display:block;
}

.container {
    width:100%;
    margin-right:auto;
    margin_left:auto;
    top:200px;
    position:relative;
}

h2 {
    position:absolute;
    font-size:20px;
    font-color:blue;
}

所以使用上面的代码我没有实现我想要的东西，即如果文本长度增加（在一些小屏幕或调整大小时），容器即jpg应该在屏幕上垂直延长，以便文本很好地适应在那个盒子里面的图像

Answer 1

很可能div被给予一个固定的高度。如果你使用firebug或chrome在div上“检查元素”，你应该能够找到设置这个高度的CSS规则。然后删除该规则，或将height:更改为min-height:。

更新

问题是div 是扩展，但图像不是。在CSS3 background-size属性得到良好支持之前，您只需将img的高度设置为100％：

img.pic {
   height: 100%;
}

溢出文本应动态调整容器大小

1 个答案: