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?