100 % 높이의 IMG 주위에 DIV 배치

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은 포함 요소에 맞게 조정됩니다.

• 즉 이미지가 100 픽셀로 100 픽셀이며, 포함하는 요소는 400 픽셀에서 400 픽셀까지 확장하고 거친 될 것 곳 width와 이미지는 100 픽셀에서 100 픽셀까지 확장 할 수 max-width를 사용하여, 폭 400 픽셀 인 경우.

그런 다음 이미지 주위에 "테두리"(컨테이너 요소)를 어떻게 감쌀 것인지 결정해야합니다. 이 한 두 가지 방법으로 수행 할 수 있습니다

• 디스플레이`로 "경계"(컨테이너 요소)를 설정 : 인라인 블록; http://jsfiddle.net/wp2eS/
• 또는 - 당신의 "경계"(컨테이너 요소) 이미지에 display: block;를 사용

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

  인해 그 사실에 이미지 아래에 표시되는 공간을 제거 http://jsfiddle.net/wp2eS/1/

CSS 플로트 이미지는 기본적으로 인라인 요소이며 해당 공간은 디 센더 높이 때문입니다. "테두리"(컨테이너 요소)를 플로팅하는 것은 동일한 효과를 가져옵니다.

HTML

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

당신은 내가 아마 이미지 자체에 CSS border 속성을 사용하는 것이 단순한 하나 개의 색상 국경을 사용하려는 경우.