Question

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

我不想使用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

这是之前尝试达到我想要的效果的一小部分，但是当浏览器调整大小时，页面没有响应，图像重叠并且表现不像预期。

Answer 1

您可以通过简化HTML来实现布局（BTW 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;
}

具有固定高度和可变宽度图像的滑块

1 个答案: