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

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

CSS和HTML

*{
保证金：0；
填充：0；
}
身体{
背景：#FFF；
}
.滑块{
宽度：640px；
位置：相对位置；
填充顶部：320px；
保证金：100像素自动；
盒影：0 10px20px-5pxRGBA（0,0,0,0.75）；
}
.slider>img{
位置：绝对位置；
左：0；
排名：0；
过渡：均为0.5s；
}
.滑块输入[name='slide_开关']{
显示：无；
}
.滑块标签{
利润率：18px 0 0 18px；
边框：3px实心#999；
浮动：左；
光标：指针；
过渡：均为0.5s；
不透明度：0.6；
}
.滑块标签img{
显示：块；
}
.滑块输入[name='slide_switch']：选中+标签{
边框颜色：#666；
不透明度：1；
}
.slider输入[name='slide_开关']~img{
不透明度：0；
转换：比例（1.1）；
}
.滑块输入[name='slide_switch']：选中+标签+img{
不透明度：1；
变换：比例（1）；
}

---

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

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

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

---

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

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

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

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

.slider>img

获取

左：50%

和

变换：translateX（-50%）

（放置在现有缩放变换旁边）

工作示例

*{
保证金：0；
填充：0；
}
身体{
背景：#FFF；
}
.滑块{
宽度：640px；
位置：相对位置；
填充顶部：320px；
保证金：100像素自动；
盒影：0 10px20px-5pxRGBA（0,0,0,0.75）；
}
.slider>img{
位置：绝对位置；
左：50%；
排名：0；
最大宽度：100%；
最大高度：100%；
过渡：均为0.5s；
}
.滑块输入[name='slide_开关']{
显示：无；
}
.滑块标签{
利润率：18px 0 0 18px；
边框：3px实心#999；
浮动：左；
光标：指针；
过渡：均为0.5s；
不透明度：0.6；
}
.滑块标签img{
显示：块；
}
.滑块输入[name='slide_switch']：选中+标签{
边框颜色：#666；
不透明度：1；
}
.slider输入[name='slide_开关']~img{
不透明度：0；
转换：比例（1.1）translateX（-50%）；
}
.滑块输入[name='slide_switch']：选中+标签+img{
不透明度：1；
转换：尺度（1）translateX（-50%）；
}

---

我认为我不理解你的问题，但我看不到它在小提琴中被复制。