이미지를 기준으로 한 CSS 최소 높이

Question

현재 텍스트의 높이보다는 그림의 높이를 기준으로 CSS를 사용하는 일부 콘텐츠의 최소 높이를 설정하려고합니다. 본질적으로

, 내 레이아웃은 다음과 같이이다 :

<Image @60% width> | <Text @40% width> 

그리고 나는 현재이 작업을 수행 플렉스 박스를 사용하고 있습니다.

그러나 지금은 페이지의 크기를 조정할 때 (정적 높이를 사용할 수 없으므로 완전히 응답해야 함) 특정 시점에서 이미지가 극도로 작아지고 텍스트로 인해 컨테이너가 커집니다.

텍스트가 항상 이미지와 동일한 높이로 표시되고, 오버플로가있을 경우 스크롤 기반이되도록하는 것이 이상적입니다.

여기 내 현재 Jsfiddle입니다.

http://jsfiddle.net/D7h3z/4/

나는 실험/새로운 기술을 사용하는 싫어하지 않아요. 필요가 없어야하므로 JavaScript를 사용하는 것에 반대합니다. 필요한 경우 JQuery를 사용하지 않으므로 가능한 경우 답변에서이를 피하십시오. I가 바이올린의 변경 아웃

Answer 1

3check - New Fiddle

본질적 I 위치 지정된 절대 설명 내측 스팬을 만든 후 컨테이너 범위에 오버플-Y 오토 배치. 나는 img 컨테이너에 200px의 최소 높이를 적용했으며 설명대로 작동하는 것으로 보입니다. 이것이 사실이 아니라면 알려주십시오.

.description { 
    width: 40%; 
    padding: 10px; 
    position: relative; 
    overflow-y:scroll; 
} 

.imagebox { 
    width: 60%; 
    min-width: 300px; 
} 

.imagebox img { 
    width: 100%; 
    min-height:200px 
} 

.description span { 
    padding: 10px; 
    position: absolute; 
} 

EDIT 실제로 ... 슬픈 트롬본 이미지 종횡비를 유지하지 않고, 또 100 %가되지 않는

EDIT A 최소 폭 2 라이트하는 그렇다고 거기에 도착하지만, 동적 인 관점에서 볼 때, 이것은 이상과는 거리가 멀다. 나는 오늘 밤 나중에 또 다른 모습을 줄 것이다.