横に対して縦の長さを指定する

Question

CSSでウィンドウサイズに合わせて縦横の大きさが変わるブラック要素を扱う際に、
横の大きさと縦の大きさの比が常に等しくなるようにしたいのです。

この時、ブロックには次のように記述したとします。

element{
width: 100%
}

この状態でheight もパーセント指定するとそれぞれ、縦横バラバラにウィンドウサイズに合わせて動いてしまいます。

そうではなく、

widthが300pxの時heightは150px。
widthが200pxの時heightは100px。
widthが100pxの時heightは50px。

…と言うふうに、

height: (widthの長さ) ÷ 2;

と言うふうな指定を行いたいのです。
どうにかして実現できませんか？

Answer 1

こんばんは。

Chrome88より実装された aspect-ratio プロパティがそれにあたります。aspect-ratio: 2 / 1とすると、そのボックスの縦横比を２：１にすることができます。
aspect-ratio - CSS: Cascading Style Sheets | MDN

問題は、ブラウザ対応がChrome系統以外でほとんどできてないことです。

Comments

[UpaZiro]

ありがとうございます！
そんなプロパティもあるのですね…！

Answer 2

padding-topを使う方法が知られてますね。

例えば下記で解説されています。

CSS Tips ボックスの縦横比を維持したままレスポンシブ対応にしたい｜a-masuda｜note

他にも「CSS 縦横比 維持 レスポンシブ」などというキーワードで検索するいろいろ見つかります。