CSS 만 사용하여 형제 크기에 따라 HTML 요소의 크기를 동적으로 조정하는 방법은 무엇입니까?

Question

고정 된 높이의 컨테이너가 있습니다. 내부에는 이미지와 그 아래에 임의의 길이의 텍스트라는 두 개의 하위가 있습니다. 텍스트가 필요한 높이를 차지하고 이미지가 나머지 공간까지 자동 조정되기를 원합니다. 여기

내가 가진 시작 코드 :

여기

http://jsfiddle.net/LLsT8/1/

<div id="parent"> 
<div> 
    <img src="http://placehold.it/250x250&amp;text=2" /> 
</div> 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut </div> 
</div> 

는 자바 스크립트 솔루션입니다,하지만 난 그게 CSS 전용 될 수 있는지 궁금하네요.

http://jsfiddle.net/LLsT8/2/

업데이트 : bfuoco의 솔루션은 내가 필요한 매우 가까이이지만, 파이어 폭스에서 작동하지 않습니다.

http://jsfiddle.net/8S6Kf/1/

Answer 1

나는이에 대한 display 속성의 table 및 table-row 값을 사용하는 것이 좋습니다 것입니다.

image-wrapper와 text 요소는 모두 테이블 행이므로 확장하여 테이블의 전체 영역을 채 웁니다. 이미지 래퍼는 높이 100 %로 설정되어 있으므로 왼쪽 여백을 소비합니다.

이미지 요소는 이미지 래퍼 내에 중첩되어 있으며 너비/높이 100 %로 설정되어 있으므로 부모와 동일한 차원을 사용합니다. 여기

이 바이올린입니다 : http://jsfiddle.net/8S6Kf/1/

HTML

<div class="parent"> 
    <div class="image-wrapper"> 
     <img class="image" src="http://placehold.it/250x250&amp;text=2" /> 
    </div> 

    <div class="text"> 
     A line of text. 
    </div> 
</div> 

CSS

.parent { 
    display: table; 
    height: 250px; 
    width: 250px; 
} 

.image-wrapper { 
    display: table-row; 
    height: 100%; 
} 

.image { 
    width: 100%; 
    height: 100%; 
} 

.text { 
    display: table-row; 
} 

업데이트

,

FF/IE에서는 작동하지 않습니다. 이 특정 문제에 대해서는 실제 이미지를 div로 대체하고 background-image 속성을 사용할 수 있습니다. 또한 이미지를 표 셀로 만들어야합니다. 그렇지 않으면 테이블을 렌더링하지 않습니다.

다음은 이미지를 늘리지 않는 예입니다.

http://jsfiddle.net/8S6Kf/7/

HTML

<div class="image"></div> 

CSS

.image { 
    display: table-cell; 
    height: 100%; 
    width: auto; 

    background-image: url(http://placehold.it/250x250&amp); 
    background-size: 100% 100%; 
} 

이미지의 크기를 유지하려면, 당신은 다른 방법이 배경 속성을 사용할 수 있습니다

background-size: contain; 
background-repeat: no-repeat;