如何使这个 css3 滑块响应

Question

我发现纯 css3 幻灯片的这个流畅而简单的代码...问题是，它没有响应，因为当图像变小而屏幕尺寸变小时，父 div“滑块”保持在 470 像素。添加宽度时，图像已经像魅力一样响应：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;
}

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

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>