css - 幅に対して高さ 100% の CSS

Question

CSS のみを使用して、幅を高さの 100% にすることさえ可能ですか? Javascriptなどを使用せずに。

{
    width: /*100% of height*/
}

Answer 1

このための新しい css ユニットがあります

width: 100vh;

これは、要素の幅がビューポートの高さの 100% になることを意味します。

CSS3 には、現在のビューポート サイズを基準にしてサイズを変更するための新しい値がいくつかあります: vw、vh、および vmin。3 つの値のいずれかの 1 単位は、ビューポート軸の 1% です。"Viewport" == ブラウザ ウィンドウ サイズ == ウィンドウ オブジェクト。ビューポートの幅が 40cm の場合、1vw == 0.4cm です。

1vw = ビューポート幅の 1% 1vh = ビューポート高さの 1% 1vmin = 1vw または 1vh の小さい方 1vmax = 1vw または 1vh の大きい方 ( css-tricks post )

参照: https://developer.mozilla.org/en-US/docs/Web/CSS/length

PS: これらの新しいプロパティのサポートは、最新のブラウザーでは実際に非常に優れています。こちらをご覧ください