jquery - 一个接一个水平对齐的可缩放背景图像

Question

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

现在，为了实现这一点，我需要position: fixed在我的图像 div 容器上放置一个 - 根据本教程。

我使用了纯 CSS 技术 #1：

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

所以，我需要的是让图像一个接一个地水平对齐（比如浮动）。这是一个小提琴（没有按钮）。谢谢。

佩德罗

Answer 1

尝试将容器中的图像设置为 display:inline-block 并将尺寸设置为容器本身。您可能还需要将容器本身设置为 display:table。像这样的东西：

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

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