親要素の横幅を基準に正方形の要素を生成する

css html フロントエンド

親要素の横幅を基準値にして子要素の縦幅を決めたい。

理由はわからないのですが、子要素に擬似要素でpadding-top;100%を指定するとできるようです。なぜ？

一応デモページへのリンクです。

デモページ

See the Pen 親要素の横幅を基準に正方形の要素を生成する by soto-ogre (@soto-ogre) on CodePen.

コードはhaml&scssですが右下のview compiledをクリックすればhtml&cssに変換してくれます。

ちなみに、デモでも書いてありますが、子要素の中に普通に別の要素を置くとその分要素は伸びてしまいます。

親要素のpositionを基準値にして横幅を指定してあげれば問題ありません。