webのメモとして残しますー!
どこかのサイトを参考にさせてもらったんですが、忘れてしまったよ…
動画のアスペクト比
16:9で横幅合わせの場合は、縦の比率を求めて9 / 16 => 0.5625 * 100 = 56.25(%)となる。
親要素の横幅に対してpadding-topを56.25%を空けることで、常に16:9の空間ができるようになる。
テンプレート
.move{ position:relative; width:100%; padding-top:56.25%; } .move iframe{ position:absolute; top:0; right:0; width:100%; height:100%; }
よく使うアスペクト比
paddint-topで使う場合は100を掛けてパーセントにする
16:9
縦を求める場合: 9 / 16 = 0.5625
横を求める場合:16 / 9 = 1.7777….
4:3
縦を求める場合: 3 / 4 = 0.75
横を求める場合:4 / 3 = 1.3333….
3:2
縦を求める場合: 2 / 3 = 0.6666….
横を求める場合:3 / 2 = 1.5
黄金比(1:1.618)
縦を求める場合: 1.618 / 1 = 1.618
横を求める場合:1 / 1.618 = 0.6180469…
白銀比(1:1.414)
縦を求める場合: 1.414 / 1 = 1.414
横を求める場合:1 / 1.414 = 0.70721357…