플로트 된 div 안에 백분율로 높이를 감싼 이미지

정말로 분명한 질문을하는 것이 유감입니다. 정말 간단한 답변을 가지고 있습니다. 단지 알아낼 수 없습니다.플로트 된 div 안에 백분율로 높이를 감싼 이미지

매우 간단히 div의 내부에 이미지를 배치하고 싶습니다. 이미지는 div 높이의 100 %를 채 웁니다.

CSS

.container{ 
     height:100%; 
     float:left;} 

img { 
     height:100%;}

HTML

<div class="container"> 
     <img src="xyz.jpg" /> 
</div>

예상하지만, 상기 결과는 비 웹킷 볼 (사업부 내) 이미지의 우측 여백 다량의 브라우저.

내 레이아웃에서 div의 너비가 이미지의 너비만큼 줄어들도록이 divs 중 많은 수가 한 줄로 늘어서 있기를 원합니다. 기본적으로

2011-12-02 osnoz

은 지정된 높이 치수가없는 div는 내용을 포함 할 수있을만큼 확장합니다. 지정된 너비가 없으면 div은 상위 너비까지 확장됩니다. 따라서 너비를 지정할 때까지 div의 너비가 이미지까지 축소되지 않습니다.

div이 의컨테이너 높이의 관계에 100% 높이, 하지 내용으로 설정 귀하의.

100%도 이미지 자체에 지정할 필요가 없습니다. 이것은 이미지를 스트레치의 컨테이너 높이의 100 %로 만듭니다. 컨테이너 높이를 지정하지 않는 한, 이것은 무의미합니다.

2011-12-02 22:31:24 Sparky

죄송의 예를 참조하십시오, t는에 이미지를 원하는 몸 높이의 100 % 인 용기 높이의 100 %로 늘어납니다. – osnoz

@osnoz, jsFiddle 예제를 게시해야한다고 생각합니다. 또한, 당신이 원하는 것은 내 대답을 무효화하지 않습니다. div를 가로로 확장하지 않으려면 너비를 지정해야합니다. – Sparky

div가 내용에 맞게 펼쳐지기를 원합니다. 무엇이 될지 모르기 때문에 너비를 지정할 수 없습니다 (백분율 레이아웃) – osnoz

내가 바로 질문을 이해하면 내가 모르겠지만, 여기 간다 : 일이 명확하지 않았다

.container { display: inline-block; height: 100%; } 
.container img { height: 100%; }

2011-12-04 02:19:23 vlgalik

답변