Question

所以，我在网站上发现了这个很酷的css / html滑块，所以我下载了代码，我将继续研究它。我已经开始编辑它并根据自己的需要设计它，我遇到了这个问题：当我添加一个比原件更大的图像时，导航缩略图就被覆盖了。我希望他们在滑块下。

CSS和HTML

＆＃13;

chunk-1

＆＃13;

* {
  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);
}

＆＃13;

Answer 1

您可以为图片指定最大宽度和最大高度，以便它们始终适合容器而不会拉伸。

.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%)（放置在现有比例转换旁边）。

工作示例

＆＃13;

* {
  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%);
}

＆＃13;

<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>

＆＃13;

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

2 个答案:

工作示例