Make overflow hidden when shrinking div
- by johnnietheblack
I have a div with an image in it, and the image is too large for the div. I have solved the overflow problem with the obvious CSS overflow:hidden trick.
But, the problem is that when the div's parent resizes (shrinks), the div holding the image won't shrink because of the image in it.
Is there a way to have a resizable div with an image in it (almost like a background image) that overflows?
MY DIV STRUCTURE:
<div id="parent">
<div id="image_holder">
<!-- this image will inevitably be larger than its parent div -->
<img src="too_big_for_div.jpg" />
</div>
</div>
MY CSS:
#parent { width:100%;}
#image_holder { width:100%; overflow:hidden;}
The #image_holder div will not resize to a smaller dimension now. Any ideas?
