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

У меня есть 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;}

#image_holder ДИВ не будет изменять размер меньшего размера, в настоящее время. Есть идеи?

источник

2010-06-17 johnnietheblack

Я думаю, что внутренний DIV будет изменять, как это имеет ширина 100%, но вы этого не заметите. Возможно, вы тоже захотите изменить размер изображения? –

Марсель, да, вы бы подумали .... но внутренний div не изменяет размер. Я не знаю, что происходит. И - мне пришлось бы изменить размер изображения на лету (когда кто-то изменит размер окна после загрузки страницы, и поэтому divs должны изменить размер) – johnnietheblack

Я думаю, что ваш вопрос неверен; Я просто проверил ваш код (с разрешением 1600x1200), а внутренний div * * изменил размер вместе с внешним. Но вы хотите, чтобы * образ * изменялся. Вы хотите, чтобы он поместился в окне просмотра браузера? –

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

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

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

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

PS: испытано в IE8, FF 3.6.3

источник

2010-06-17 20:48:38

Сначала попробуйте установить родительскую ширину и высоту с пикселями, а не pct.

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

источник

2010-06-17 20:38:24

Майк, да, переполнение родителя работает, но в этом конкретном случае мне нужно, чтобы родительский div был изменен. это должен быть процент, который расширяет или сокращает ширину браузера ...как кто-то изменяет размер на лету – johnnietheblack

Если вы не нашли свой ответ, и вы спешите, вы можете поместить свое изображение на задний план внутреннего DIV –

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

источник

2010-06-17 20:42:51 listenrightmeow

Mike, который работает, если div больше изображения, но как только ширина родительского div меньше изображения, внутренний div попадает в край изображения и не будет уменьшаться, что означает, что родитель не будет – johnnietheblack

сделать ваш родительский div эквивалентным измерению em для изменения размера жидкости. – listenrightmeow

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

источник

2010-06-17 20:48:28 nearlymonolith

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

ответ

Смежные вопросы