【css】高さの無い要素に高さを認識させる方法について

java scriptやjQueryなどを使わずに画像のスライドショーを設置したく、ネットで調べて下記のように出来上がり、設置しました。

サイトの横幅を指定するPCサイトでは問題なかったのですが、divの高さを指定しないといけないため、レスポンシブデザインでは、画面幅によって次にくる要素と離れすぎたりかぶったりしてしまいますので、使用できません。

レスポンシブにも対応できるようにするためには、どこをどう改変すれば良いでしょうか？
もしくは方法を大きく変えないとダメでしょうか？

初心者ですみませんが、教えてください。よろしくお願いいたします。

(html)

<div class="photo_show">
 <img src="../images/1.jpg">
 <img src="../images/2.jpg">
 <img src="../images/3.jpg">
 <img src="../images/4.jpg">
</div>

(css)

.photo_show {
  height: 400px;
  width: 100%;
  /*max-width: 480px;*/
  position: relative;
  margin: auto;
}
.photo_show img {
  animation: show 20s infinite;
  -webkit-animation: show 20s infinite;
  height: auto;
  max-width: 100%;
  width: 100%;
  opacity: 0;
  position: absolute; 
}
/*アニメーション*/
@keyframes show {
  0% {opacity:0}
  10% {opacity:1}
  20% {opacity:1}
  50% {opacity:0}
 }
@-webkit-keyframes show {
  0% {opacity:0}
  10% {opacity:1}
  20% {opacity:1}
  50% {opacity:0}
}

/*各画像のアニメーションの開始時間をずらす*/
.photo_show img:nth-of-type(1) {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.photo_show img:nth-of-type(2) {
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
}
.photo_show img:nth-of-type(3) {
  animation-delay: 10s;
  -webkit-animation-delay: 10s;
}
.photo_show img:nth-of-type(4) {
    animation-delay: 15s;
    -webkit-animation-delay: 15s;
}

kei344

2017/11/14 04:23

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

画像の縦横比が固定なら、padding-bottom に「縦 / 横 * 100」の数値を % で指定すれば横幅に対して一定の比率の高さが設定できます。

CSS
1.photo_show {
2  /*height: 400px;*//*DELETE*/
3  width: 100%;
4  /*max-width: 480px;*/
5  position: relative;
6  margin: auto;
7  /*ADD*/
8  padding-bottom: 43%; /* 350x150の画像の場合（厳密な数字ではないが） */
9}
10```**動くサンプル：**[https://jsfiddle.net/7w9fomow/2/](https://jsfiddle.net/7w9fomow/2/)