33

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

グリッド内の正方形の幅を % (つまり、100%/N) で簡単に計算できますが、高さの計算に問題があります。Web ページの高さは、私が人為的に制限しない限り、常に無限になります。

グリッドの高さと幅の制​​約が動的で正方形ではない場合、グリッド内の正方形を長方形ではなく正方形にするにはどうすればよいですか?

4

4 に答える 4

50

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

vw ユニットの使用

ユニットを使用vwして、要素を正方形でレスポンシブにすることができます ( MDN の viewport units )。そのため、ビューポートの幅(または単位付きの高さ)
1vw = 1% of viewport widthに従って要素の高さを設定できます。 4x4 グリッドの例:vh

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>

単位を使用してビューポートの高さに応じて要素のサイズを変更しても、同じ動作を実現できますvh。

パディングの使用

パディングはコンテナの幅に応じて計算されるため、幅に応じてブロックの高さを設定するために使用できます。
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>

于 2014-05-13T14:04:12.850 に答える
28

div を正方形にするのは、CSS を使用すると非常に簡単です。幅を設定します。たとえば、50% とします。次に、同じ値の padding-bottom を追加します。

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

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

.

.

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

9/16 = 0.56

これに要素の幅 (この場合は 50%(=0.5)) を掛けると、次のようになります。

9/16*0.5= 0.28 = 28%

于 2014-10-19T20:38:54.980 に答える
24

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

$('div').height($('div').width());
于 2010-04-15T20:39:52.107 に答える
-2

上記の解決策は領域を保持しません - これは優れています

        //@param {jQuery} div 
        function makeSquare(div){
            //make it square !
            var oldDimens = {
                h : div.height(),
                w : div.width()
            };
            var area = oldDimens.h * oldDimens.w;
            var l = Math.sqrt(area);
            div.height(l).width(l);
        }
于 2012-12-11T05:25:06.963 に答える