水平列表，靈活高度

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項目的大小，使圖像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%; 
}