Home/ Questions/Q 3611534
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T21:53:16+00:00

I have added one image (it is a nice painted box type thing rectangular

  • 0

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 this?

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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%;
}
    • 0