web-dev-qa-db-ja.com

パーセンテージに基づいて動的に変化する幅がある場合、<div>を正方形にします

ユーザーのNの選択に基づいてNxNグリッドを生成するWebアプリに取り組んでいます。ユーザーがさまざまな用紙サイズで印刷できるように、グリッドの全幅を相対的（つまり、使用可能なスペースの100％）にしたい。

グリッド内の正方形の幅を％で簡単に計算できます（つまり、100％/ N）。ただし、高さの計算に問題があります。私が意図的に制限しない限り、Webページの高さは常に無限になります。これは、私が言ったように、それをしたくないからです。

グリッドの高さと幅の制​​約が動的で正方形ではない場合、どのようにしてグリッド内の正方形を正方形にするに対して長方形にすることができますか？

htmlcssgrid-layoutdimensionsaspect-ratio
32
Nate

これはテストされていません。CSSでのみこれを行う方法がわかりません。jQueryを使用します。

$('div').height($('div').width());
22
Christopher Altman

レスポンディング要素のアスペクト比を維持するには、パディングとvwユニットを使用して2つの主な手法があります。
（正方形のレスポンシブグリッドの完全なソリューションについては、次のことができます この回答を参照 ）

VWユニットの使用

vw単位を使用して、要素を正方形で応答性の高いものにすることができます（ MDNのビューポート単位 ）。
1vw = 1% of viewport widthしたがって、ビューポートの幅に応じて要素の高さを設定できます。
4x4グリッドの例：

body{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

div{
    width:23vw; height:23vw;
    margin:1vw 0;
    background:gold;  
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

同じ動作は、ビューポートの高さusin vh unitsに応じて要素のサイズを変更することで実現できます。

パディングを使用する

パディングはコンテナの幅に基づいて計算されるので、それを使用してブロックの幅に応じてブロックの高さを設定できます。
4x4グリッドの例：

.wrap {
    width:80%;
    margin:0 auto;
}
.wrap div {
    width:23%;
    padding-bottom:23%;
    margin:1%;
    float:left;
    background:gold;
}
<div class="wrap">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
39
web-tiki

CSSを使用すると、divを正方形にするのは非常に簡単です。幅を設定します。たとえば、50％とします。次に、同じ値のパディングボトムを追加します。

div {
width: 50%;
padding-bottom: 50%;
}

また、ウィンドウのサイズを変更しても常に正方形のままです。

。

。

ボックスを16：9にしたい場合は、次のように計算します。

9/16 = 0.56

次に、要素の幅（この場合は50％（= 0.5））を掛けるので、

9/16 * 0.5 = 0.28 = 28％

20
LeeCanvas