【CSS】アスペクト比を固定しながら可変させる方法

今回はアスペクト比を固定させながら可変させる方法をご紹介します。
ということで、まず何に使うかというと…レスポンシブに対応した画像や動画が思い浮かぶと思います。

基本的に画像に関しては

等々をやってあげれば、レスポンシブには対応できるとは思うのです。

問題は、動画ですね。
iframeとか使われちゃうと、高さも明記してあげないと0pxになってしまうという！
いつもこれで頭を悩ませる…
それで、調べると「擬似要素にpadding-top: 75%;入れてあげればいいんだよ！」と、出てくるけど上手くいかない。

そもそも75%って何の数字なの？
その前に、なぜ擬似要素でpadding-topなの？

そんな疑問をこちらで解決いたします。

結局のところ75%とはなんなのか。

アスペクト比4:3の要素の横幅に対して高さが75%、ということになります。

だから「レスポンシブ　比率　固定」とかで検索して「75%だよ！」って言われるのは、あながち間違ってないのですが…アスペクト比4:3に対しての75%っていう答えなんです。

アスペクト比16:9に対しては56.25%になります。

なぜ擬似要素でpadding-topを使うのか？

その答えはずばり、「paddingは親要素の横幅を基準に計算する」からです。

これはよく見るコードですが…意味が分かってしまえば、使い方も分かってくる！
CODEPENのウィンドウに対して横幅50%のboxがあります。

実際に試してみると

これでは高さが足りない。

こちらのコードで実現ができました。

もちろん、iframeでも使えます。

従来、iframeのレスポンシブで紹介されるコードといえばこちらが定番だったと思います。

こちらのコードで実現ができました。

scssを見ていただくと、widthとheightしか書いてないのがお分かりかと思います。

以上により、「アスペクト比を固定して可変することができる」ということが分かりました。

ぜひ実用してみてください。