web-dev-qa-db-ja.com

CSS：divの幅を高さに比例させる

これは説明するのが少し難しいですが、：widthに比例してスケーリングするレスポンシブハイトdiv（height: 100%）が必要ですheight（その逆ではない）。

このメソッドpadding-topハックを利用して高さを幅に比例させることを知っていますが、逆に対処する必要があります。そうは言っても、私はそのメソッドのコンテンツに絶対配置要素の追加要件にあまり熱心ではないので、私はここで月の月を求めているのかもしれません。

視覚化を支援するために、ここに画像があります：

Visual representation of desired effect

...そして、これは jsFiddle で、ほぼ同じことを示しています。

:beforeおよび:after疑似要素を使用して、比例的にスケーリングするボックスのコンテンツを垂直方向に揃えていることに注意してください。

サイズ変更ハンドラーと、通常はすべてのラウンドでより多くのデバッグを行う必要があるため、jQueryに戻る必要はありません。しかし、それが私の唯一の選択である場合は、fiatです。

htmlcsscss3scale
30
indextwo

私はしばらくの間、この問題に対する純粋なCSSソリューションについて疑問に思っていました。最終的に、emsを使用したソリューションを思い付きました。これはvwsを使用して段階的に拡張できます。

完全に機能するデモと説明については、codepenリンクを参照してください。

http://codepen.io/patrickkunka/pen/yxugb

簡易版：

.parent {
  font-size: 250px; // height of container
  height: 1em;
}

.child {
  height: 100%;
  width: 1em; // 100% of height
}
13
Patrick Kunka

ああ、おそらく「パディングトップ」トリックを使用できます。

width: 50%;
height: 0;
padding-bottom: 50%;

http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

または：

.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #4679BD;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}

http://codeitdown.com/css-square-rectangle/

CSSの垂直方向のパディングは、高さではなく要素の幅に関連しています。

13
feeela

フォントソリューションでは、高さがわかっている必要があります。親のdiv内で幅と高さが不明な要素を比例させるためのソリューションを見つけました。 デモはこちら 。

私が使用しているトリックは、スペーサーとして画像を使用することです。コードの説明：

<div class="heightLimit">
 <img width="2048" height="2048" class="spacer"
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAA
       P///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
 <div class="filler">
  <div class="proportional">
  </div>
 </div>
</div>

そのため、2つの余分なdivと無用なイメージを備えた最も美しいものではありません。しかし、それはさらに悪化する可能性があります。画像要素には、目的の寸法の幅と高さが必要です。幅と高さは、許可される最大サイズと同じ大きさである必要があります（機能です！）。

CSS：

.heightLimit {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: auto;
 max-width: 100%;
 overflow: hidden;
}

この要素は高さを制限するが、水平方向に拡張する（width: auto）親（max-width）。一部の子はdivの外側に突出するため、オーバーフローを非表示にする必要があります。

.spacer {
 width: auto;
 max-height: 100%;
 visibility: hidden;
}

この画像は見えず、高さに比例して拡大縮小されますが、幅は調整され、親の幅も強制的に調整されます。

.filler {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}

この要素は、絶対に配置されたコンテナでスペースを埋めるために必要です。

.proportional {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 100%;
}

そして、ここで私たちの比例要素は、おなじみのパディングボトムトリックで幅に比例した高さを取得します。

残念ながら、ChromeおよびIEにバグがあるため、デモなどでJavascriptを使用して親要素を変更しても、ディメンションは更新されません。 。デモで示したように、それを解決するために適用できるハックがあります。

6
Johan Rönnblom

ビューの高さ（vh）をwidthの単位として使用できます。

これは、20pxのマージンを要求した例です。

 .parent {
   margin : 20px;
}
.child {
   width: calc(100vh - 40px);
   height : calc(100vh - 40px);
   margin:0 auto;
   background: red;
   box-sizing:border-box;
   padding:10px;
}

フィドルを参照してください： https://jsfiddle.net/svobczp4/

1
Erwan

@kunkalabsの回答（これは非常に賢明です）に基づいて、継承されたフォントサイズを保持できるソリューションを考え出しました。

HTML：

<div id='rect'>
    <div id='content'>Text</div>
</div>

CSS：

#rect {
    font-size: 1000%;
    height: 1em;
    width: 1em;
    position: relative;
}

#content {
    font-size: 10%;
}

したがって、基本的に#contentのフォントサイズは（100/$ rectFontSize）*長方形の100％です。長方形に明確なピクセルサイズが必要な場合は、#rectの親のフォントサイズを設定できます。 。

1
hobberwickey