DIV обертывание вокруг IMG со 100% высотой

Question

У меня есть DIV, а IMG, настроенный на 100% высоту и ширину, авто.

Но я хочу, чтобы DIV изменял размер/обертывал ширину IMG (и сохранял его соотношение сторон) при изменении размера браузера. Только это не похоже на это. В любом браузере. Кто-нибудь знает, почему это происходит?

div { 
    height:100%; 
    background:red; 
    display:inline-block; 
    padding:20px; 
    box-sizing:border-box; 
} 

img { 
    height:100%; 
    display:block; 
} 

<div> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/> 
</div> 

Вы можете попробовать его здесь. У div есть красный фон. http://jsfiddle.net/jjktF/3/

Спасибо!

Answer 1

попробуйте установить ширину вашего div так же, как и ширину вашего изображения, возможно?

Answer 2

эй я надеюсь, что это поможет вам увидеть, указанных ниже CSS

div { 
    background: none repeat scroll 0 0 red; 
    display: inline-block; 
    height: 100%; 
    max-width: 100%; 
    padding: 20px; 
} 

img { 
    display: block; 
    height: auto; 
    max-width: 100%; 
} 

его работы в соответствии с вашим требованием .......

DEMO

DEMO2

Answer 3

Вы можете установить ширину div следующим образом.

div { 
    background: none repeat scroll 0 0 red; 
    display: inline-block; 
    height: 100%; 
    width: 100%; 
    padding: 20px; 
} 

img { 
    display: block; 
    height: auto; 
    width: 100%; 
} 

Answer 4

Вы можете использовать max-width: 100%; или width: 100%; поэтому изображение будет повторно размер. Разница в том, что max-width предотвратит масштабирование изображения над его исходными размерами, где width будет масштабироваться, чтобы соответствовать содержащему элементу.

• т.е. если ваше изображение 100px на 100px и содержащий элемент 400px в ширину, используя max-width изображение будет только масштабировать до 100px по 100px, где с width было бы масштабироваться до 400px по 400px и стать зернистым.

После этого это всего лишь вопрос определения того, как вы собираетесь обернуть свою «границу» (элемент контейнера) вокруг изображения. Вы можете сделать это одним из двух способов:

• установить «границу» (элемент контейнера) на `display: inline-block; http://jsfiddle.net/wp2eS/
• или - плавать ваш "граница" (контейнер элемент) http://jsfiddle.net/wp2eS/1/

CSS

img { 
    max-width: 100%; 
    /* or */ 
    width: 100%; 
    display: block; 
} 

Использование display: block; на изображение удаляет пространство, которое отображается под изображением из-за того, что изображение по умолчанию является встроенным элементом, и это пространство связано с высотой дескриптора. Плавание «границы» (элемент контейнера) будет иметь тот же эффект.

HTML

<span class="frame"> 
    <img src="http://lorempixel.com/200/200/abstract/" /> 
</span> 

Если вы собираетесь использовать простой один цвет границы, я бы, вероятно, просто использовать свойство CSS border на самом изображении.