制作响应式图像幻灯片

Question

我一直在我的网站上播放图像幻灯片。当我在 PC 版网站上测试时效果很好，但在移动网站上无法正常缩小，每个图像的比例不对。

HTML：

<div class="slider">
  <div class="slides">
    <input type="radio" name="radio-button" id="radio-button1">
    <input type="radio" name="radio-button" id="radio-button2">
    <input type="radio" name="radio-button" id="radio-button3">
    <input type="radio" name="radio-button" id="radio-button4">
    <input type="radio" name="radio-button" id="radio-button5">
    <div class="slide one">
      <img src="IMG_3725.jpg">
    </div>
    <div class="slide">
      <img src="IMG_3953.jpg">
    </div>
    <div class="slide">
      <img src="IMG_8098.jpg">
    </div>
    <div class="slide-automatic">
      <div class="auto-button1"></div>
      <div class="auto-button2"></div>
      <div class="auto-button3"></div>
      <div class="auto-button4"></div>
      <div class="auto-button5"></div>
    </div>
  </div>
  <div class="slide-manual">
    <label for="radio-button1" class="manual-button"></label>
    <label for="radio-button2" class="manual-button"></label>
    <label for="radio-button3" class="manual-button"></label>
    <label for="radio-button4" class="manual-button"></label>
    <label for="radio-button5" class="manual-button"></label>
  </div>
</div>

CSS：

.slider {
  width: 85%;
  height: 100%;
  border-radius: 10px;
  text-align: center;
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.slides {
  width: 500%;
  height: 500px;
  display: flex;
}

.slides input {
  display: none;
}

.slide {
  width: 20%;
  transition: 2s;
}

.slide img {
  width: 100%;
  height: 100%;
}

.slide-manual {
  position: absolute;
  width: 100%;
  margin-top: -60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.manual-button {
  border: 2px solid #FFFFFF;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
  margin: 15px;
}

.manual-button:hover {
  background: #FFFFFF;
}

#radio-button1:checked~.one {
  margin-left: 0;
}

#radio-button2:checked~.one {
  margin-left: -20%;
}

#radio-button3:checked~.one {
  margin-left: -40%;
}

#radio-button4:checked~.one {
  margin-left: -60%;
}

#radio-button5:checked~.one {
  margin-left: -80%;
}

.slide-automatic {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 440px;
}

.slide-automatic div {
  border: 2px solid #FFFFFF;
  padding: 5px;
  border-radius: 10px;
  transition: 1S;
  margin: 15px;
}

#radio-button1:checked~.slide-automatic .auto-button1 ,
#radio-button2:checked~.slide-automatic .auto-button2 ,
#radio-button3:checked~.slide-automatic .auto-button3 ,
#radio-button4:checked~.slide-automatic .auto-button4 ,
#radio-button5:checked~.slide-automatic .auto-button5 {
  background: #FFFFFF;
}

Javascript：

var counter = 1;
setInterval(function(){
  document.getElementById('radio' + counter).checked = true;
  counter++;
  if(counter > 4) {
    counter = 1;
  }
}, 5000);

我尝试在这段代码中添加 CSS 媒体查询，以使每个图像的比例在屏幕缩小时保持不变，但我没有任何运气。

我还尝试更改 .slide img 代码，并能够保持幻灯片中图像的比例。然而，当幻灯片停止从一张图像移动到下一张图像后，就好像它冻结了一样。

.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translate(-50%, -50%);
}

任何有关如何使此幻灯片具有响应能力的想法将不胜感激。

Answer 1

我可以看到您已将幻灯片类的高度设置为 500px 并将幻灯片类下的图像设置为 100% ，这就是比例不匹配的原因，因为图像高度始终保持 500px。

.slides {
  width: 500%;
  /*removed height */
  display: flex;
}

现在可以工作了