가로 목록, 유연한 높이

Question

이미지 내용이 포함 된 가로 목록을 만들고 싶습니다. 이미지 크기는 컨테이너의 높이에 반응하는 ul의 높이를 따라야합니다. 바이올린에 컨테이너 창을 확장 할 수 http://jsfiddle.net/nLcrW/

#container{ 
    display: block; 
    position: absolute; 
    top: 15%; 
    height: 70%;  
    background: cyan; 
} 

.HList{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    white-space: nowrap; 
} 
.HList-Item{ 
    display: inline-block; 
    height: 100%; 
} 
.HList img{ 
    height: 100%; 
} 

시도 : 여기

는 바이올린입니다. 크기가 조정되면 이미지가 오버랩되고 Chrome 및 Firefox에서는 축소 될 때 이미지가 늘어납니다. Safari에서 완벽하게 작동합니다.

다른 방법으로이 브라우저를 작동 시키거나 해결할 수 있습니까?

Answer 1

여기에 FIDDLE에 대한 업데이트가 있습니다.

HList-Item의 크기를 조정하면 이미지를 100 % 만들 수 있습니다.

이제 등, 제거 앵커의 이미지를 포함, 공백을 추가 스타일링 재생할 수 있습니다

CSS

#container{ 
    top: 15%; 
    height: 70%;  
    background: cyan; 
} 
.HList{ 
    list-style: none; 
} 
.HList-Item{ 
    display: inline-block; 
    height: 5%; 
    width: 18%; 
} 
.HList img{ 
    height: 100%; 
    width: 100%; 
}