Overflow text should dynamically resize the container
I have added one image (it is a nice painted box type thing rectangular shape) on my webpage. I placed some text on that.
Now when I open it in smaller resolution screens, the text is coming out of the box vertically. I want to stop that and make the jog box (I mean here div) stretchable vertically according to text.
Is there any simple way to accomplish th开发者_运维百科is?
Edit: The body tag goes like this
<body>
<div .class="container">
<img src="pic.jpg" class="pic" alt="">
<h2>some lenghty text</h2>
</body>
and the CSS goes here
.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;
}
So with the above piece of code I am not achieving what I want i.e if the text length increases (in some small screens or while resized), the container i.e jpg should be prolonged vertically down the screen so that the text sits nicely inside that box image itself
Most likely the div was given a fixed height. If you "inspect element" on the div using firebug or chrome, you should be able to hunt down the CSS rule that sets this height. Then either remove that rule, or change height: to min-height:.
Update:
The problem is that the div is expanding, but the image is not. Until the CSS3 background-size property is well supported, you can simply set the height of the img to 100%:
img.pic {
height: 100%;
}
加载中,请稍侯......
精彩评论