Question

我正在尝试创建响应式全屏水平图库滚动。我已经解决了，但结果不好。 Actuallt图像应该完全拉伸到li。我垂直滚动。其次，li在firefox上并没有什么好处，但在Chrome上它运行正常。请帮忙。谢谢。我的代码片段

    ul {
        display: inline-block;
        height: 100px;
        white-space: nowrap;
        margin: 0;
        padding: 0;
    }
    li {
        display: inline-block;          

        max-height: 100%;
        width: 25%;

    }

这是小提琴 FIDDLE

感谢。

Answer 1

由于你的高度是固定的，你可以使用img width作为100％

slides {
            width: 100%;
            overflow: auto;
            margin: 0;
            padding: 0;
        }
        ul {
            display: inline-block;
            height: 100px;
            white-space: nowrap;
            margin: 0;
            padding: 0;
        }
        li {
            display: inline-block;      
            height: 100px !imoprtant;
            width: 25%;
        }
        li img{
            width: 100%;
        }

<强> DEMO

Answer 2

demo with li.image = 25%

Full li image demo

body {
        width:100%;
        margin: 0;
        padding: 0;
    }

您遗失了width

中的body tag

请注意，width: 100%;上的slides类不会有效，除非此类的父级已定义width（这是正文）！！

全屏李水平滚动项目无法正常工作

2 个答案: