要素を比率に合わせてレスポンシブさせる

   

ボックスを比率に合わせてレスポンシブさせたかったので覚書。

参考サイト:【レスポンシブコーディング】要素の横幅と高さの比率を保つ
ソースコードとかは参考サイトを確認してください。

4:3は、横幅:高さです。
padding-top(%) = 高さ / 横幅 * 100
この計算式で求めます。4:3は、3/4*100で、75になります。
よって、padding-topに75%を設定します。

詳細は参考先の記事を読んでほしいんですけど、上記がポイント。
なので比率にあわせてpadding-topを設定してあげればよいわけです。

METALLIC RATIOをベースにpadding-topに入る数値を考える

じゃあ比率はどうするかと考えたときにオーソドックスな貴金属比で考えます。今回はMETALLIC RATIOを使います。


横幅に600pxといれると自動的に比率にあわせた高さが表示されます。便利ですね。
3:4の場合は450:600という数値になりました。

比率の計算をする

比率計算機のサイトの計算式を使います。

600と450の数値をそれぞれ入力し計算すると、
1:x  1:0.75
ここを使います。0.75* 100で75。
padding-top:75%;

他の比率も同じように見ていくと ※()内はpadding-top
1.414の場合 0.71(71%)
1.618の場合 0.62(62%)
1.732の場合 0.58(58%)
2の場合 0.5(50%)
1+1.414の場合 0.42(42%)
1+1.618の場合 0.38(38%)
3.303の場合 0.3(30%)
になると思っているけど計算の仕方違うよ、って場合はこっそり教えてほしい・・・。算数と英語ができない…。

ブックマーク

ほぼ自分用のサンプル

0

 - stylesheet