css에서 유체 높이를 갖는 방법은 무엇입니까?

Question

나는 아래로 슬라이드와 내용을 표시합니다 마우스 오버 이미지에 일부 항목에 효과가 아래로 슬라이드를 만들기 위해 노력하고있어 문제는 브라우저 크기를 조정할 때 나는

img { max-width: 100%; }

을 가지고 있기 때문에 이미지가 너무 크기를 조정하다

하지만 문제는 유체 높이가 너무 높아서 사용할 수없는 것입니다. 이는 무슨 일이 일어나고 있는지입니다 :

http://codepen.io/joe/pen/yLjEx

나는 무슨 일이 일어나고 있는지 볼 수있는 검은 색으로 배경을 설정하고, 나는 현재 높이 210px 있습니다.

어떻게이 문제를 해결할 수 있습니까?

Answer 1

나는 내 작품이 유사한 문제 건너했습니다. 불행히도 CSS가있는 깨끗한 솔루션은 없습니다. onresize 이벤트 동안 실행되는 자바 스크립트를 사용하거나 보이지 않는 자리 표시 자 이미지를 추가하고 div의 크기를 올바른 비율로 유지할 수 있습니다.

.desc은 div의 "모양을 유지하는"풍선 이미지 사본 위에 절대적으로 위치하게했습니다. 당신은 투명 .png을 사용하거나 내 codepen에서 opacity:0.0;처럼 이미지를 설정할 수 있습니다. 내 <li> 중간을 포함하여 스크롤 할 수있는 예를 참조하십시오.

Foreked codepen w/ auto-resize height and scrolling

참고 : 이미지가 투명하게하기 위해 더 많은 테스트와 IE의 filter의 가능한 사용을 필요로이 크로스 브라우저를 작동합니다.

Answer 2

min-width:300px; (300px는 원하는 크기로 전환 가능), img {}. 따라서 img { max-width: 100%; min-width:300px;}이됩니다. 그렇게하면 이미지 아래에 텍스트가 부족하게됩니다.

Forked codepen with the 300px added.