css - 水平列表，高度灵活

Question

我想制作一个带有图像内容的水平列表。图像大小应遵循 ul 的高度，它会根据容器的高度使用react。

这是 fiddle :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%;
}

尝试缩放 fiddle 中的容器窗口。在 Chrome 和 Firefox 中，图像在放大时会重叠，在缩小时会拉伸(stretch)。它在 Safari 中完美运行。

是否有其他方法可以使它正常工作，或者有针对这些浏览器的解决方法？

Answer 1

这是您的 FIDDLE 的更新.

只需调整 HList-Item 的大小，使图像 100% 的大小。

您现在可以玩弄样式、添加空格、删除空格、将图像嵌入 anchor 等。

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%;
}