CSS 100％height on width

Question

CSSだけで幅を100％にすることは可能ですか？ Javascriptなどを使わずに。

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

Answer 1

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

width: 100vh; 

のための新しいCSS単位があります。

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

1vwビューポートの高さ=ビューポートの幅1vhの1％= 1％1vmin = 1vwか小さい方 1vh、1vmax = 1vw又は1vh、大きい方（css-tricks post）

リファレンス：https://developer.mozilla.org/en-US/docs/Web/CSS/length

PS：これらの新しいプロパティのサポートは、現代のブラウザではかなり良いものです。 See here

Answer 2

この質問Height equal to dynamic width (CSS fluid layout)は、Nathan RyanのCSS専用の回答が良いようです。それはまた、彼の答えの下のコメントを追加の説明を読む価値がある。私はこれが役立つことを願っています

ソリューションが複雑すぎる場合は、誰かが良い代替ソリューションを持っている場合に達成しようとしていることに、より多くのコンテキストを与える価値があります。