Сделайте переполнение скрытым при уменьшении отделения
У меня есть отделение с изображением в нем, и изображение является слишком большим для отделения. Я решил водосливную проблему с очевидным CSS overflow:hidden прием.
Но, проблема состоит в том, что то, когда родитель отделения изменяет размер (уменьшается), отделение, содержащее изображение, не уменьшится из-за изображения в нем.
Существует ли способ иметь отделение изменяемого размера с изображением в нем (почти как фоновое изображение), который переполняется?
МОЯ СТРУКТУРА 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;}
#image_holder отделение не изменит размер к меньшему размеру теперь. Какие-либо идеи?
4 ответа
Я протестировал ваш код, и он действительно изменяет размер внутреннего 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
Если вы сделаете изображение фоновым изображением держателя изображения , его размер должен измениться правильно независимо от ширины соответствующих div (при условии, что переполнение и вложение настроены правильно)
Во-первых, попробуйте задать для родителя ширину/высоту в пикселях, а не в пунктах.
Также, разве скрытый overflow на parent не даст желаемого эффекта?
#parent{width:100%;overflow:hidden;}
#image_holder{width:inherit;}