この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

あなたがこれを行うことができますカップルの方法があります、あなたはそれが大きくなったり小さくなるにつれて、スライドショーの縦横比を維持しようとしていると仮定すると、 。

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>