CSSで正方形のdivを作る

Question

タイトル通りですが、どのように動いて、正方形が作られてるのかわからなかったので、質問致しました。

ネットで検索すると以下のような記述がありました。

#wrapper {
    position: relative;
    width: 100%;
}
#wrapper:before {
    content:"";
    display: block;
    padding-top: 100%;
}
#content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

参考URL:https://qiita.com/ryounagaoka/items/a98f59347ed758743b8d

padding-topの100%が横幅の100%を取るのは、わかったのですが、
・beforeでなぜ指定しているのか
・なぜcontent要素にもそれが影響するのか、どうやってcontent要素の縦横が決まっているのか
がわかりません。

どなたかご教授いただけるとうれしいです。
よろしくお願い致します。

Answer 1

beforeでなぜ指定しているのか

padding-topの「%」指定は、親要素のwidthの大きさを基準として計算されるためです。

before疑似要素でpadding-topを%指定することで、「#wrapperの横幅の100%」をpadding-topとすることが出来まるようになり、アスペクト比固定を実現出来るわけです。

なぜcontent要素にもそれが影響するのか、どうやってcontent要素の縦横が決まっているのか
がわかりません。

#contentではheightやwidthの指定はありませんが、position : absolute; top: 0; left: 0; bottom: 0; right: 0;というスタイルが当てられています。

この記述により、親要素の上辺左辺右辺下辺まで要素が広がることとなり、結果として親要素と同じアスペクト比になるというわけです。

---

fiddleによるdemoを公開しておられるようなので、実際にご自身でcssのパラメータをいじって確かめられると、理解しやすいかもしれません。

http://jsfiddle.net/ryounagaoka/u7cc2wc1/

Comments

[Rio12882]

回答ありがとうございます。
質問した内容は理解できました。ありがとうございました。
一つ質問なのですが、
before疑似要素が親要素の最初の子要素として、padding-topを指定することで
親要素の高さが、子要素のbeforeに合わせて、変化して、
中のcontentはその親要素の高さと幅をとるからという理解で正しいでしょうか。

[akai]

そうです。

ちなみに、#contentは#wrapperの幅/高さに影響されますが、#content自身はposition:absoluteが指定されているため、#wrapperの幅/高さには影響を与えません。

[Rio12882]

ありがとうございました！
すっきりしました！