div ширина не обновляется при изменении размера

Возможно, у меня, вероятно, отсутствует что-то основное.div ширина не обновляется при изменении размера

HTML:

<body> 
    <div class="outer"> 
     <div class="inner"> 
      <img src="http://placekitten.com/g/200/300" /> 
     </div> 
     <div class="inner"> 
      <img src="http://placekitten.com/g/200/200" /> 
     </div> 
    </div> 
</body>

CSS:

html, body { 
    height: 100%; 
    width: 100%; 
} 
.outer { 
    height: 30%; 
    border: 1px solid #000; 
} 
.inner { 
    position: relative; 
    display: inline-block; 
    height: 100%; 
    border: 1px solid #f00; 
} 
img { 
    position: relative; 
    display: inline; 
    height: 100%; 
    width: auto; 
}

Here's the preview

То, что я пытаюсь достичь: Я хочу, чтобы оба изображения масштабировались до 100% высоты .выражения div при сохранении пропорций и Я хочу, чтобы .inner div имел ширину изображения, которое он содержит.

Проблема: Когда я захватить нижнюю часть окна и сократить:

В Chrome: высота изображения и дивы правильно меняется, но ширина .inner дивы и изображения не обновляется, что приводит к в изменении пропорций изображений.

В Firefox: изображения масштабируются правильно, но ширина .inner divs не обновляется.

Когда я захватить нижнюю часть окна и укрупняются:

И в Chrome и Firefox: изображения масштабируются должным образом, но ширина .inner дивы не обновляется.

источник

2014-09-05 kihu

Вы установили height из .outer div на 30% из body. Итак, когда вы сокращаете окно баузера, и тело height становится короче. В конце концов соотношение сторон не будет поддерживаться.

Вы можете установить минимальную высоту в div .outer. Для ПРИМЕР- 190px

.outer { 
    height: 30%; 
    border: 1px solid #000; 
    min-height: 190px; /* Add this */ 
}

Делая это, height из .outer DIV будет оставаться 30%body от s height, но это не становится меньше, чем 190px.

Надеюсь, эта идея вам поможет.

источник

2014-09-05 10:04:42

О, я не хотел поддерживать соотношение сторон .outer div. Мне просто нравятся отношения с изображениями, и их следует хранить, используя {height: 100%; width: auto;}, но это перестает работать после того, как я завершаю их с помощью .inner divs – kihu

@kihu Ну, пропорции изображения фактически поддерживаются, если вы обновите браузер после сокращения окна браузера. Но при обновлении он обновляется. Я посмотрю, есть ли способ внести изменения в жизнь. –

Спасибо! Для того, что стоит, когда я удаляю. Div div, все обновляется отлично. Но мне они нужны, к сожалению. – kihu

div ширина не обновляется при изменении размера

ответ

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