親divを子divと同じサイズにし、親に追加の子要素を中央に配置する

Question

スライドショーを作成しています。親コンテナはslideと呼ばれ、次の子要素を持ちます： prev、next、figure。

親divが子要素 'figure'と同じサイズになり、次のdivと前divが 'figure'要素の左右に揃うようにしたいと思います。親の幅と高さを応答しないように固定することは望ましくありません。

「figure」要素の中に 'next'と 'prev' divを追加したくないのですが、Figure要素がたくさんあることを計画していて、繰り返したくないと思っています素子。

/* Styles go here */ 
 

 
.slide{ 
 
    padding: 0; 
 
    width: 100%; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 
.slide:before{ 
 
    display: block; 
 
    padding-top: 25%; 
 
} 
 

 
.next, .prev{ 
 
    color: #fff; 
 
    position: absolute; 
 
    background: rgba(0,0,0, 1); 
 
    top: 50%; 
 
    z-index: 1; 
 
    font-size: 2em; 
 
    margin-top: -.75em; 
 
    opacity: 0.9; 
 
    user-select: none; 
 
} 
 
.next:hover, .prev:hover{ 
 
    cursor: pointer; 
 
    opacity: 1; 
 
} 
 
.next{ 
 
    right: 0; 
 
    padding: 10px 5px 15px 10px; 
 
    border-top-left-radius: 3px; 
 
    border-bottom-left-radius: 3px; 
 
} 
 
.prev{ 
 
    left: 0; 
 
    padding: 10px 10px 15px 5px; 
 
    border-top-right-radius: 3px; 
 
    border-bottom-right-radius: 3px; 
 
} 
 
figure{ 
 
    width: 100%; 
 
    position: absolute; 
 
    opacity: 0; 
 
    margin:0; 
 
    padding:0; 
 
    transform: scale(0); 
 
    transition: all .7s ease-in-out; 
 
    -webkit-transition: all .7s ease-in-out; 
 
    -moz-transition: all .7s ease-in-out; 
 
    -o-transition: all .7s ease-in-out; 
 
} 
 
img{ 
 
    width: 100%; 
 
    height: auto; 
 
    border-radius: 3px; 
 
} 
 
figcaption{ 
 
    position: absolute; 
 
    font-family: sans-serif; 
 
    font-size: 1em; 
 
    bottom: .35em; 
 
    right: .15em; 
 
    color: #fff; 
 
    background: rgba(0,0,0, .9); 
 
    border-radius: 3px; 
 
    padding: .2em; 
 
} 
 
figcaption a{ 
 
    color: #fff; 
 
} 
 
figure.show{ 
 
    width: 100%; 
 
    opacity: 1; 
 
    position: absolute; 
 
    transform: scale(1); 
 
    transition: opacity 1s ease-in-out; 
 
    -webkit-transition: opacity 1s ease-in-out; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    -o-transition: opacity 1s ease-in-out; 
 
}

<div id='slide' class='slide'> 
 

 
    <figure id="0" class="show"> 
 
    <img src="http://www.naamagazine.com/wp-content/uploads/2016/05/couple-getaways-image-520x400.jpeg"> 
 
    <figcaption>Some Text</figcaption> 
 
    </figure> 
 

 
    <span class="prev">‹</span> 
 
    <span class="next">›</span> 
 

 
</div>

私はちょうど親のように前と親に添付次のdivタグと子要素として応答と同じ大きさにするでしょう。

Answer 1

ボタンは実際にコンテナの端に揃えられています。問題は画像が拡大されないことだけです。これに

img{ 
    max-width: 100%; 

：あなたのstyle.cssでは、この変更

img{ 
    width: 100%; 

を、ウィンドウがするように、あなたは、画像のエッジと矢印のラインアップ、スケールが表示されるはずです。

矢印を垂直方向にセンタリングすることは、​​要素に高さを設定しない限り難しいかもしれません。これは、スライド内の画像の縦横比がわかっている限り、依然として応答性があります。ボトムパッディングを使用してこれを行う方法があります。必要なアスペクト比に基づいて設定します。次に、画像をwidth: 100%; height: 100%; position: relative;に設定し、比率が正しい限り、それらはすべて適切に適合する必要があります。

figure { 
    position: absolute; 
    width: 100%; 
    height: 0; 

    /* This will make a box that's always twice as wide as it is tall */ 
    padding-bottom: 50%; 

    /* This one's twice as tall as it is wide */ 
    padding-bottom: 200%; 
}