943 views

この記事は最終更新から 2060日 が経過しています。

1. やりたいこと

ブロック要素の縦横比を固定したい。

2. やってみた！

(1) 高さを幅の 70%に固定する。

Window幅を変化させた場合、追従して高さも変化する。

div.xxxxx{
  position: relative;
  width: 100%;
}
div.xxxxx:before{
  content:"";
  display: block;
  padding-top: 70%; /* 高さ = 幅 x 70% に固定 */
}

CSS における ::before は、親要素の最初の子要素として擬似要素を作成する。
よって、ここで指定した padding-top は、この要素を包含する親要素の高さにもなる。

実行サンプルはこちら。
https://www.dogrow.net/hp/sample/00047/

でも…
padding-top:70% の 70% が、なぜ幅の70%となるのか？
親要素の高さの70%と解釈されるのではないのか？
が不明だ…
後でちゃんと調べよう。