(47) ブロック要素の縦横比を固定する。

投稿者: | 2018年7月31日

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

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%と解釈されるのではないのか?
が不明だ…
後でちゃんと調べよう。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)