paddingと%で高さを出す計算方法 ※レスポンシブ対応
youtubeなどのiframeを使った埋め込みコンテンツをレスポンシブ対応させる時に高さをpaddingで出すことは少なくないと思います。
よくよく見かけるのがアスペクト比はデフォルトで 16:9 なので、横幅は width: 100%; 高さは padding-top: 56.25%; を指定するよっていう説明。
また、positionプロパティを使ったために要素の高さがなくなってしまう場合もあるでしょう。
この場合よく見かけた対策で大量にブレイクポイントを作り、その都度heightプロパティを調整する方法は
スマートではないしキッチリと拡大縮小しません。
ここではアスペクト比の出し方とアスペクト比を使ってレスポンシブ対応できる高さの値の求め方を紹介します。
この記事の目次
アスペクト比の求め方
アスペクト比を求めるには幅と高さの最大公約数を求ます。
※最大公約数は2つ以上の整数に共通する約数(割り切れる数値)の中で一番大きい数値を言います。
幅と高さをその最大公約数で除算した数値が比率になります。
よく埋め込まれるyoutubeを例として考えてみます。
youtubeの埋め込みコードには幅が560px高さが315pxがデフォルトで設定されています。
この場合の5×7で最大公約数は35になります
後は560と315をそれぞれ35で割った値がアスペクト比になります
幅:560 ÷ 35 = 16
高さ:315 ÷ 35 = 9
結果からyoutubeのアスペクト比は16:9になりますね。
高さの求め方
今回は高さの値を求めたいので式に当てはめて計算します。
式
高さの比率 ÷ 幅の比率 × 100で求められます。
youtubeの場合、アスペクト比が16:9なので計算式は 9 ÷ 16 × 100 = 56.25
あとは求められた数値に%を付け、paddingを使って上でも下でも好きな方向に余白を付けるだけになります。
この計算方法を覚えておけばiframeや高さがなくなったコンテンツ、擬似要素を使って飾りつけなどのレスポンシブ対応もきっちりとしたものが実装できるでしょう。
ツールを作ってみた
半角数字で値を打ち込むだけで計算できるよう作ってみたので設置
幅: px
高さ: px
この記事の目次
