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

Question

大家好，我正在研究这个响应式水平画廊，但现在我进退两难。

我试图在一次拍摄(视口(viewport))中获得 4 个列表项。图像不知何故没有拉伸(stretch)到全高。

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

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

代码看起来像这样。请检查 fiddle 。谢谢。

像这样 Link

Answer 1

这是我的答案:

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

我将所有宽度设置为窗口的 100%(包括 html 和 body)，如果页面内有其他可滚动元素，这可能会出现问题。

之后，我只是将图像放置在

中，并使用绝对位置，并将它们的高度设置为 100%(这会将它们拉伸(stretch)到容器的底部，同时保持纵横比不变)。

为了让它居中，我使用了

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

技巧，这将使一个绝对定位的元素保持在容器的中心(只要容器具有 position: relative)

我硬编码了一个

min-width 420px;

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

希望对你有帮助