Question

我想制作一个包含图像内容的水平列表。图像大小应该遵循ul的高度，这会对容器的高度做出反应。

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

水平列表，高度灵活

1 个答案: