可伸缩的背景图像一个接一个地水平对齐

Question

我正在构建一个自定义水平幻灯片，并且我已经将其完全可扩展的图像理想化 - 当您调整浏览器窗口大小时，图像会相应缩放。

现在，为了实现这一点，我需要在我的images div容器上设置position: fixed - 根据此tutorial。

我使用了CSS-Only技术＃1：

#imageContainerDiv img {
    min-height: 100%; 
    min-width: 1024px;
    width: 100%; 
    height: auto;
    position: fixed; 
    top: 0;
    left: 0;
}

所以，我需要的是让图像一个接一个地水平对齐（就像浮动一样）。 这是一个Fiddle（没有按钮）。 感谢名单。

佩德罗

Answer 1

尝试在容器内设置图像以显示：内联块并将尺寸设置为容器本身。您可能还需要将容器本身设置为display：table。像这样：

#imageContainerDiv {
    display:table;
    min-width: 1024px;
    height:auto;
}

#imageContainer Div img {
   display:inline-block;
   width: 100%; 
   height: auto;
   position: fixed; 
   top: 0;
}