如何使此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

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

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

.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标记添加类img-responsive。代码的其余部分保持不变。这将根据您的屏幕大小更改图像的大小。

​

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

​