web-dev-qa-db-ja.com

高さがビューポートに等しい正方形DIV

ビューポートのwidth=heightとheight=100%（これは明らかに可変です）のDIVを作成する必要があります。

言い換えれば、寸法を計算する完全に正方形のDIV ビューポートの高さに基づいて。そのDIV内の要素は、親DIVの高さと幅の割合として寸法を取得します。

これは簡単に行うことができるように思えますCSSでですが、私はそれにこだわっています！どんなポインターでも大歓迎です。

htmlcssaspect-ratiocss-shapes
43
Ila

Jquery（または必要に応じて純粋なjavascript）でこれを行うことができます。

Jqueryの場合：

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

$(document).ready(function(){
  var height = $(window).height();
  $('#square').css('height', height);
  $('#square').css('width', height);
});
17
Ant

私がつまずいた純粋なCSSを使用したきちんとしたトリックがあります：

#square {
width: 100%;
height: 0;
padding-bottom: 100%;
}

お役に立てば幸いです。

http://blog.brianjohnsondesign.com/2013/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/

117
Tomasz Kowalczyk

CSSのみのソリューション：vhユニット

ビューポートのheightに従って要素のサイズを変更するには、vh単位を使用できます：

vh：ビューポートの高さの1/100。 [ ソースMDN ]

例：

body{margin:0;}

div{
    background:gold;
    height:100vh;
    width:100vh;
}
<div></div>

Fiddle DEMO

これにより、要素の幅と高さがビューポートの高さと等しくなります。

VhユニットのBowserサポートはIE9 +です。詳細 こちら

31
web-tiki

このページを偶然見つけた人のために、この問題を部分的に解決するために私が思いついたもう1つのトリック...ページのonloadイベントで次のコードを実行します。

$('body').css('font-size',$(window).height()/100)

これは、cssの「em」単位がページの高さの100分の1であることを意味します。これをcssファイルで任意に使用して、ビューポートの高さに対してアイテムのサイズを変更できます。これは、ここにリストされている他のソリューションよりも一般的です。ビューポートの高さを考慮するために、ページの要素のサイズをallにしたい可能性が高いです。たとえば、正方形を作成したい場合は、次のように書くことができます。

#square{width:100em;height:100em}

もちろん、ページ上のテキストについてもこれを考慮する必要があります（このトリックはフォントサイズに影響するため）

3
drcode

CSS3には、vw（ビューポート幅）とvh（ビューポート高さ）を使用してこれを行う方法があります。これらのメジャーを使用すると、100vwはビューポートの幅全体であり、100vhは高さ全体です。相対css3値と単位の詳細 here 。

ただし、これを書いている時点では、唯一のサポートはInternet Explorer 9であるため、これはおそらくあなたが探しているものではありませんが、将来のサポートが続く場合に留意すべきものです。

3
Vap0r

これは面白い...

最大サイズのsquaredivを含む純粋なCSSの方法を探している人向け：

ここで重要なことは、max-widthおよびmax-heightwidthとheightを反対の値に設定しながら。

[〜＃〜] html [〜＃〜]

<div>
</div>

[〜＃〜] css [〜＃〜]

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

div {
  background-color: red;
  width: 100vh;
  height: 100vw;
  max-width: 100vw;
  max-height: 100vh;
}

ライブ実行の例：https://jsfiddle.net/resistdesign/szrv5o19/

0
Resist Design

これが正しいかどうかはわかりませんが、ビューポートの高さの100％に設定する場合は、CSSで簡単に実行できます。

.stuff {
  background:#DDD;
  display:inline-block;
  height: 100vh;
  width : 100vh;
}

あなたはそれをチェックアウトすることができます ここ

0
desto

Javascriptを使用して、画面サイズを取得できます。その後、それに応じて幅と高さを設定できます。

window.screen.width、およびwindow.screen.heightは動作するはずです。

その後、この情報を使用して、ページを表示するためのCSSを少し生成することができます。

0
Daniel Szekely