html - 如何将这些缩略图放置在 slider 下方？

Question

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

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

首先将 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>