CSS のみで高さを可変にして要素の比率を維持するテクニック - Webrawl1:1 や 2:1 など比率を維持したままグリッド配置するときに重宝する CSS の小ネタです。 JS を使ってわざわざ height の値を計算する必要がなくなります。 1. padding の特性を理解する CSS のみで比率を固定する場合 padding の値を利用します。 padding は % で値を指定した場合、width の数値を基準 (100%) とします。 この単純な仕組みを理解しておけば好きな比率の要素を作ることができます。 2. コードを書いてみる 実際にコードを書いてみます。 まず、 :before 擬似要素に padding-top で要素の比率を指定します。 要素内が padding-top で埋まってしまうのは absolute 属性の .inner を配置することで回避します。基本はこれだけです。 <div class="box ratio-1_1"> <d
[dp（dip）] を [px] に変換 [dp（dip）] → [px] Conversion | BLACKFLAG![[dp（dip）] を [px] に変換 [dp（dip）] → [px] Conversion | BLACKFLAG](https://cdn-ak-scissors.b.st-hatena.com/image/square/bd7f43946768aad1f06300e637b882c90bf15786/height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp.png)
