ワイズリマインダー

block要素でheightをwidthの比率で作る

レスポンシブなどで、widthのサイズが変化したとき、
アスペクト比を保ちつつheightを変えたい場合

#fooはwidthが50%の正方形

<div id="foo">
 <div id="bar"></div>
</div>
#foo{
  position:relative;
  width:50%;
  height:100%;
  padding:100% 0 0;
}
#bar{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

#foo内のpadding値を変えることで、
形を変えることが出来る
padding = height / width * 100

例えば、2:3にしたい場合
3 / 2 * 50% = 75%

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください