高さ維持率に応じた四角形の尺度

Question

高さに応じて100％の高さと幅のスケーリングを持つ正方形を作成し、常にその縦横比を維持する必要があります。

例とイラスト：

正方形DIVスケーリングの一般的な例は、幅（https://spin.atomicobject.com/2015/07/14/css-responsive-square/）に従います。私はCSS/flexboxを使用してこれを解決したいと思いますが、私は適切な解決策を見つけることができません。 （IEと従来のブラウザのサポートは重要ではありません）

同じスタイルを共有する複数の要素が存在する必要があります。 私はそれを描こうとしましたが、これが理にかなっているかどうかはわかりません。個々の四角形は外側のdivに収まる必要がありますが、3つの四角形は同じサイズであってはなりません。

私が与えると、私はこれをやって試してみた方法のアイデアたいが、私はたくさんのことをやったので、詳細に入ることは困難である - それらのどれもが本当に作業していません。私は絶対的な位置付けを試みましたが、それには幅が必要です。私はjqueryを使って幅/高さを計算しようとしました - これは長い間waaaayを取る - 多くのエントリがあるので。私は高さを使用してみました：100％+ width：auto、何もレンダリングしません、私は上記の解決策を試しました（これは華麗です、はい悲しいことに、 。 etcetcetc !! :)

この問題の解決策は私の問題には十分ではありません。

Answer 1

あなたはこのCSSを使用することができます

<div class="square"></div> 

このHTMLのためのVHおよびカルク

で作業することができ

body { 
    background-color: #515151; 
} 

.square { 
    margin: 1vh auto; 
    background-color: #cacaca; 
    height: 98vh; 
    width: calc(99vh * 0.8); 
} 

​​

Answer 2

これを試してみてください：

width: 100vh; 
height: 100vh; 

デモ：

body { 
 
    margin: 0; 
 
} 
 
.square { 
 
    width: 100vh; 
 
    height: 100vh; 
 
    background: grey; 
 
    margin: auto; 
 
}

<div class="square"></div>

jsFiddle

Answer 3

.row { 
 
display:table; 
 
    width:100%; 
 
} 
 
.row div { 
 
display:table-cell; 
 
    vertical-align:top; 
 
    
 
} 
 
.col-1 ,.col-3{ 
 
background-color:red;} 
 
.col-2 { 
 
background-color:green; 
 
}

<div class=row> 
 
    <div class="col-1">1</div> 
 
    <div class="col-2">2</div> 
 
    <div class="col-3">3</div> 
 
    
 
</div>

Answer 4

残念ながら、CSSだけでこれを実装する方法はありません。他のビューポート単位を使用することもできますが、これは常にビューポート全体のサイズに比例します。これは、Javascriptがそれをより柔軟にする唯一の方法である判明：

document.addEventListener('DOMContentLoaded', function() { 
 
    var el = document.getElementById('square'); 
 

 
    (window.onresize = function() { 
 
     el.style.width = el.clientHeight + 'px'; 
 
    })(); 
 
});

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#container { 
 
    background: red; 
 
    height: 80%; 
 
} 
 
#square { 
 
    background: lime; 
 
    height: 100%; 
 
    margin: auto; 
 
}

<div id="container"> 
 
    <div id="square"></div> 
 
</div>