Question

嘿伙计们，我正在处理这个响应水平的画廊，但现在我陷入了两难境地。

我想在一次拍摄（视口）上获得4个列表项目。图像以某种方式不会拉伸到最大高度。

看看，请告诉我，如果我的图像尺寸不好或类似的话。我需要一次拍摄至少4张图像。谢谢 FIDDLE

li {
    display: inline-block;
    max-height: 100%;
    width: 25%;
}
li img {
    max-width: 100%;
}

代码看起来像这样。请检查小提琴。感谢。

像这样 Link

Answer 1

这是我的答案：

http://jsfiddle.net/SKEL2/14/

我将所有宽度设置为窗口的100％（INCLUDING html和body），如果页面中有其他可滚动元素，则可能会出现问题。

之后我只是将图像放在

位置绝对位置，并给它们100％的高度（这会将它们拉伸到容器的底部，保持纵横比不变）。

为了保持居中，我使用了

top: 50%;
transform: translateX(-50%);

技巧，这会将绝对定位的元素保留在容器的中心（只要容器具有位置：相对）

我硬编码了

min-width 420px;

当窗口变得太小时，避免图像周围出现白色边框。

希望这有帮助

Answer 2

检查这个小提琴：http://jsfiddle.net/SKEL2/15/

*{
    height:100%;
}
body {
    width:100%;
    margin: 0;
    padding: 0;
}
slides {
    width: 100%;
    overflow: auto;
    margin: 0;
    padding: 0;
}
ul {
     width:100%;
    display: inline-block;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}
li {
    display: inline-block;
    max-height: 100%;
    width: 25%;
    background-image:url('http://beautifulsoftwares.com/scroll/img/2.jpg');
    background-size:cover;
    background-position:50% 50%;
}
li img {
    max-width: 100%;
}

background-image:url(''); - 将图像设置为元素

background-size:cover; - 使用图像覆盖整个宽度和高度的属性

background-position:50% 50% - 图像居中

水平滚动列表项目图像不合适

2 个答案: