以前の記事の問題点

以前の記事内でも書いてありますが、下記コードの4行目で高さを固定してしまっているため幅は可変しますが高さが可変しません。
表示画面幅によって画像の上下が隠れたり、上下に隙間ができたりと問題が発生します。

表示領域が広いとき

表示領域が狭いとき

一応確認用のデモページを作成しましたので表示領域を変化させながら確認してみるといいでしょう。

高さを可変させればかんたんですが、紹介しているコードだと『position: absolute;』を中に入っているimg要素に対して行っているので内包した要素の高さは0扱いになり、絶対値による指定しかできない形になってしまっています。
heightプロパティに%を使って指定を試しても高さ0に対しての相対指定になるので結局高さは出てくれません。

paddingを使って高さを出す

高さの指定を%できないのであればpaddingを使って高さを出してしまおうという考え。
この方法は画像サイズによって計算が必要になり、指定する値が変わるのでちょっと難易度は高くなりますがそこまで難しくはありません。

今回の画像サイズ

ここでは800（横幅）×500（高さ）のサイズで解説していきます

計算方法

以前の記事でyoutubeなどのiframeを使った埋め込みコンテンツをレスポンシブ対応させる時に高さをpaddingで出す方法を紹介しました。

この方法を応用すれば今まで紹介していた高さの可変ができないスライドショーがきっちりと可変するようになります。

今回使う画像のサイズはアスペクト比が8:5なので 計算式にすると5 ÷ 8 × 100 = 62.5%となります。
高さの代わりに「padding-top」か「padding-bottom」で要素の内側に余白をつけるだけになります

計算用のツールも用意してありますので詳しくは下のリンクから確認お願いします。

関連記事

paddingと%で高さを出す計算方法 ※レスポンシブ対応

youtubeなどのiframeを使った埋め込みコンテンツをレスポンシブ対応させる時に高さをpaddingで出すことは少なくないと思います。・・・。

コピペ用のコード

あとは使う画像サイズによって都度計算していただき、指定すれば大丈夫です。
今回紹介した画像の場合のデモページとコードも残しておきますので調整して使っていただければと思います。

画像サイズがバラバラの場合はすべて同じサイズに画像自体を調整するか、小さいものに合わせていただくといいと思います。

以上おしまい

他のスライドショーもこの方法で高さの可変ができますよ