Сделать переполнение скрытым при уменьшении div

Question

У меня есть div с изображением, и изображение слишком велико для div. Я решил проблему переполнения с очевидным переполнением CSS: скрытый трюк.

Но проблема в том, что когда родительский элемент div изменяет размеры (сжимается), div, содержащий изображение, не будет уменьшаться из-за изображения в нем.

Есть ли способ иметь изменяемый размер div с изображением в нем (почти как фоновое изображение), которое переполняется?

СТРУКТУРА МОЕГО DIV:

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

МОЙ CSS:

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

Теперь div #image_holder не будет изменять размеры до меньшего размера. Есть идеи?

Answer 1

Я проверил ваш код и он изменил размер внутреннего div. Чтобы на самом деле это увидеть, попробуйте установить свойство border для image_holder, а также установить процентную ширину родительского элемента в более низкое значение, например так:

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

Если вы изменили размер окна браузера и можете наблюдать крайнюю правую границу, это означает, что ваш DIV изменяет размер в обычном режиме. Возможно, что-то не так.

Если бы вы могли предоставить больше информации, я был бы рад помочь ...

P.S .: протестировано в IE8, FF 3.6.3

Answer 2

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

Answer 3

Если вы сделаете изображение фоновым изображением image-holder, оно должно измениться должным образом независимо от ширины соответствующих элементов div (при условии, что переполнение и вложение правильно настроены)

Answer 4

Во-первых, попробуйте установить для родителя ширину / высоту с пикселями, а не в pct.

Кроме того, не будет ли переполнение, скрытое на родителе, иметь желаемый эффект?