html - 图像 slider 的响应式包装器 div

Question

因此，我尝试使用 HTML5、CSS3 和 jQuery 制作响应式图像 slider 。我已经创建了 slider ，但它没有响应。可能是因为 slider 的父包装器没有响应。当我试图使父包装 div 响应时，要么显示 slider 内的所有图像，要么图像失真(当高度分配给父包装 div 时)。我们不能从父 div 中删除 overflow:hidden，因为它是唯一一个阻止所有图像同时显示的属性。这是我的 fiddle :Fiddle 这是我的 HTML

<div id="slider-wrapper">
    <div class="images">
        <img src="image1.jpg">
        <img src="image2.jpg">
        <img src="image3.jpg">
        <img src="image4.jpg">
    </div>
</div>

和CSS一样

#slider-wrapper {
  width: 80%;
  height: auto;
  overflow: hidden;
  border: 1px solid black;
}

#slider-wrapper .images {
  width: 100%;
  height: auto;
}

#slider-wrapper .images img {
  width: 100%;
  height: auto;
  overflow: hidden;
}

我试图将我的代码缩减到基本级别，以便仅提及需要响应的父 div 以及其中的图像 div。我想要实现的是仅使第一张图像对其当前宽度和高度可见作为自动(以确保图像响应)并隐藏所有图像。我用 jQuery 来滑动图像。谢谢 :) 干杯!

Answer 1

我修改了您的代码，以便在图像上使用 display:inline-block 并在容器上使用 white-space:nowrap 来一个接一个地显示图像。

请看this updated example .

#slider-wrapper{
    ....
    white-space:nowrap;
}

#slider-wrapper .images img{
    ....
    display:inline-block;
}

规则display:inline-block 用于告诉浏览器:

"这些元素将被视为 block 元素(例如，因此它们可以具有高度和宽度)但同时也必须被视为内联元素(因此它们不会一层层堆叠，而是一层层叠)在其他人旁边，因为它们将是“单词”)。

为了将一个并排放置，容器必须足够宽以容纳这么长的内容(否则元素会像长文本中的单词一样排在下一行)。你有一个固定宽度的容器，所以你必须告诉浏览器:

“不要在空格处换行，忽略它们并将所有元素放在同一行上”