html - 具有固定高度和可变宽度图像的 slider

Question

我正在尝试创建一个具有固定高度和可变宽度图像的 slider 。我需要 slider 为页面的 100% 宽度，并响应浏览器视口(viewport)。

我不想使用 JS。

HTML

<div id="photoframeContainer">
  <div id="photoframe">
    <div class="imageContainer"><img id="theImage" src="uploads/picture02.jpg" alt=""></div>
    <div class="imageContainer"><img id="theImage" src="uploads/picture03.jpg" alt=""></div>
    <div class="imageContainer"><img id="theImage" src="uploads/picture04.jpg" alt=""></div>
    <div class="imageContainer"><img id="theImage" src="uploads/picture05.jpg" alt=""></div>
    <div class="imageContainer"><img id="theImage" src="uploads/picture06.jpg" alt=""></div>
    <div class="imageContainer"><img id="theImage" src="uploads/picture07.jpg" alt=""></div>
    <div class="imageContainer"><img id="theImage" src="uploads/picture08.jpg" alt=""></div>
  </div>
</div>

上次尝试失败的 fiddle

fiddle

这是以前尝试实现我想要的东西的 fiddle ，但是页面没有响应，因为当浏览器调整大小时，图像重叠并且表现不正常。

Answer 1

你可以通过简化 HTML 来实现你的布局(顺便说一下，id 必须是唯一的，所以你不应该在所有图像上使用正常的 id):

DEMO

<div id="photoframe">
    <img class="test" src="" alt="" />
    <img class="test" src="" alt="" />
    ...
</div>

CSS:

body, html {
    height:100%;
    margin:0;
}

#photoframe {
    white-space:nowrap;
    height:50%;
}
img {
    height:100%;
    width:auto;
}