如何将这些缩略图放置在滑块下方？

Question

所以，我在网站上发现了这个很酷的 css/html 滑块，所以我下载了代码，并打算研究它。我已经开始根据自己的需要对其进行编辑和设计，然后我遇到了这个问题：当我添加比原始尺寸更大的图像时，导航缩略图被覆盖了。我希望它们在滑块下。

CSS 和 HTML

* {
  margin: 0;
  padding: 0;
}
body {
  background: #FFF;
}
.slider {
  width: 640px;
  position: relative;
  padding-top: 320px;
  margin: 100px auto;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider>img {
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.5s;
}
.slider input[name='slide_switch'] {
  display: none;
}
.slider label {
  margin: 18px 0 0 18px;
  border: 3px solid #999;
  float: left;
  cursor: pointer;
  transition: all 0.5s;
  opacity: 0.6;
}
.slider label img {
  display: block;
}
.slider input[name='slide_switch']:checked+label {
  border-color: #666;
  opacity: 1;
}
.slider input[name='slide_switch'] ~ img {
  opacity: 0;
  transform: scale(1.1);
}
.slider input[name='slide_switch']:checked+label+img {
  opacity: 1;
  transform: scale(1);
}

<div class="slider">
  <input type="radio" name="slide_switch" id="id2" checked="checked" />
  <label for="id2">
    <img src="http://www.placehold.it/100" width="100" />
  </label>
  <img src="http://www.placehold.it/200X800" />

  <input type="radio" name="slide_switch" id="id3" />
  <label for="id3">
    <img src="http://www.placehold.it/100/FF0000" width="100" />
  </label>
  <img src="http://www.placehold.it/640X320/FF0000" />

  <input type="radio" name="slide_switch" id="id4" />
  <label for="id4">
    <img src="http://www.placehold.it/100/FF9900" width="100" />
  </label>
  <img src="http://www.placehold.it/640X320/FF9900" />

  <input type="radio" name="slide_switch" id="id5" />
  <label for="id5">
    <img src="http://www.placehold.it/100/FFFF99" width="100" />
  </label>
  <img src="http://www.placehold.it/640X320/FFFF99" />
</div>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>

Answer 1

您可以为图像指定 max-width 和 max-height 以便它们始终适合容器而不会拉伸.

.slider>img {
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.5s;

  /* ADD THESE LINES */
  max-width: 100%;
  max-height: 100%;
}

Answer 2

首先将 img 的宽度和高度限制在其容器内：

.slider > img {
    max-width: 100%;
    max-height: 100%;
}

现在，让我们将图像居中，这对于不跨越容器宽度的图像看起来会好很多：

.slider > img 得到 left: 50% 和 transform: translateX(-50%)（放置在现有比例变换旁边）。

工作示例

* {
  margin: 0;
  padding: 0;
}
body {
  background: #FFF;
}
.slider {
  width: 640px;
  position: relative;
  padding-top: 320px;
  margin: 100px auto;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider>img {
  position: absolute;
  left: 50%;
  top: 0;
  max-width: 100%;
  max-height: 100%;
  transition: all 0.5s;
}
.slider input[name='slide_switch'] {
  display: none;
}
.slider label {
  margin: 18px 0 0 18px;
  border: 3px solid #999;
  float: left;
  cursor: pointer;
  transition: all 0.5s;
  opacity: 0.6;
}
.slider label img {
  display: block;
}
.slider input[name='slide_switch']:checked+label {
  border-color: #666;
  opacity: 1;
}
.slider input[name='slide_switch'] ~ img {
  opacity: 0;
  transform: scale(1.1) translateX(-50%);
}
.slider input[name='slide_switch']:checked+label+img {
  opacity: 1;
  transform: scale(1) translateX(-50%);
}

<div class="slider">
  <input type="radio" name="slide_switch" id="id2" checked="checked" />
  <label for="id2">
    <img src="http://www.placehold.it/100" width="100" />
  </label>
  <img src="http://www.placehold.it/640X320" />

  <input type="radio" name="slide_switch" id="id3" />
  <label for="id3">
    <img src="http://www.placehold.it/100/FF0000" width="100" />
  </label>
  <img src="http://www.placehold.it/1000X1000/FF0000" />

  <input type="radio" name="slide_switch" id="id4" />
  <label for="id4">
    <img src="http://www.placehold.it/100/FF9900" width="100" />
  </label>
  <img src="http://www.placehold.it/640X320/FF9900" />

  <input type="radio" name="slide_switch" id="id5" />
  <label for="id5">
    <img src="http://www.placehold.it/100/FFFF99" width="100" />
  </label>
  <img src="http://www.placehold.it/640X320/FFFF99" />
</div>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>

如何将这些缩略图放置在滑块下方？

How can I position these thumbnails under the slider?

html

css

slideshow

工作示例