如何使此 css3 滑块响应

Question

我发现这个流畅而简单的代码用于纯 css3 幻灯片......问题是，它没有响应，因为当图像以较小的屏幕尺寸变小时，父div"滑块"保持在 470px。添加宽度时，图像已经像魅力一样响应：100%。有人有想法吗？甚至可能吗？

.HTML：

<div class='slider'>
<div class='slide1'><img src="../lp-pic-first.png"></div>
<div class='slide2'><img src="../lp-pic-second.png"></div>
<div class='slide3'><img src="../lp-pic-four.png"></div>
</div>

.CSS：

.slider {
max-width: 1175px;
height: 470px;
position: relative;
width: 94%;
margin: 0 auto;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
animation:fade 16s infinite;
-webkit-animation:fade 16s infinite;
}
.slide2 {
animation:fade2 16s infinite;
-webkit-animation:fade2 16s infinite;
}
.slide3 {
animation:fade3 16s infinite;
-webkit-animation:fade3 16s infinite;
}

@keyframes fade
{
0%   {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
@keyframes fade2
{
0%   {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
@keyframes fade3
{
0%   {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}

Answer 1

假设您尝试在幻灯片变大或变小时保持幻灯片的纵横比，有几种方法可以做到这一点。

一种是使用大众单位表示容器的宽度和高度。例如：

.slider {
  height: 48vw; /* 48/27 = 1.777 (16:9 aspect ratio) */
  height: 27vw;
  position: relative;
  margin: 0 auto;
}

另一种方法是在整个事物周围添加另一个包装器，并为内部部分提供一个底部填充值，设置为您想要的纵横比。例如：

.HTML：

<div id="wrapper">
<div class='slider'>
<div class='slide1'><img src="../lp-pic-first.png"></div>
<div class='slide2'><img src="../lp-pic-second.png"></div>
<div class='slide3'><img src="../lp-pic-four.png"></div>
</div>
</div>

.CSS：

#wrapper {
    height: 470px;
    width: 94%;
    max-width: 1175px;
    margin: 0 auto;
}
.slider {
    position: relative;
    padding-bottom: 56.25%; /* 9/16 = 0.5625 (16:9 aspect ratio) */
}

Answer 2

您需要将类img-responsive添加到img标记中。其余代码保持不变。这将根据您的屏幕尺寸更改图像的大小。

.slider {
max-width: 1175px;
height: 470px;
position: relative;
width: 94%;
margin: 0 auto;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
animation:fade 16s infinite;
-webkit-animation:fade 16s infinite;
}
.slide2 {
animation:fade2 16s infinite;
-webkit-animation:fade2 16s infinite;
}
.slide3 {
animation:fade3 16s infinite;
-webkit-animation:fade3 16s infinite;
}
@keyframes fade
{
0%   {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
@keyframes fade2
{
0%   {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
@keyframes fade3
{
0%   {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container"> 
<div class='slider'>
<div class='slide1'><img class="img-responsive" src="http://www.menucool.com/slider/prod/image-slider-2.jpg"></div>
<div class='slide2'><img class="img-responsive" src="http://www.menucool.com/slider/prod/image-slider-5.jpg"></div>
<div class='slide3'><img class="img-responsive" src="http://wowslider.com/sliders/demo-5/data/images/sur.jpg"></div>
</div>
  </div>