Make overflow hidden when shrinking div

Question

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?

Answer 1

First, try to set the parent both width/height with pixels, not pct.

Also, won't a overflow hidden on parent would have the desired effect?

Answer 2

#parent{width:100%;overflow:hidden;}
#image_holder{width:inherit;}

Answer 3

If you make the image a background image of image-holder it should resize properly regardless of widths of the corresponding divs (assuming overflow and attachment are properly configured)

Answer 4

I 've tested your code and it does resize the inner div. To actually observe it, try setting the border property of the image_holder, and also set the parent 's percentage width to a lower value like so:

#image_holder { width:100%; overflow:hidden; border: 1px solid red;}
#parent { width:70%;}

If you resize the browser window and can observe the rightmost border, it means your DIV resizes normally. Perhaps there's something else wrong.

If you could provide more info, I'd be glad to help...

P.S.: Tested in IE8, FF 3.6.3