web-dev-qa-db-ja.com

動的幅に等しい高さ（CSS流体レイアウト）

幅と同じ高さ（比率1：1）を設定することは可能ですか？

例 

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

_ css _ 

div {
  width: 80%;
  height: same-as-width
}
javascriptjqueryhtmlcssresponsive-design
391
Thomas Norman

JQueryを使うと、これを実現することができます。

var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

http://jsfiddle.net/n6DAu/1/ で作業例を確認してください

63
Hussein

[更新：このトリックを独自に発見しましたが、それ以来、私は Thierry Koblentz に私を打ち負かしました。彼の 2009記事 はA List Apartにあります。クレジットが支払われるクレジット。]

私はこれが古い質問であることを知っていますが、私didがCSSでのみ解決する同様の問題に遭遇しました。これが私の ブログ投稿 です。投稿には 実例 が含まれています。コードは以下に再投稿されます。

HTML：

<div id="container">
    <div id="dummy"></div>
    <div id="element">
        some text
    </div>
</div>

CSS：

#container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#dummy {
    margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver /* show me! */
}

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}
<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>
667
Nathan Ryan

CSSを使う方法があります！

親コンテナに応じて幅を設定する場合は、高さを0に設定し、padding-bottomを現在の幅に応じて計算されるパーセンテージに設定できます。

.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

これはすべての主要ブラウザでうまく機能します。

JSFiddle： https://jsfiddle.net/ayb9nzj3/ /

376
Kristijan

Javascriptがなくても可能です:)

この記事は完全にそれを説明します - http://www.mademyday.de/css-height-equals-width-with-pure-css.html

HTML：

<div class='box'>
    <div class='content'>Aspect ratio of 1:1</div>
</div>

CSS：

.box {
    position: relative;
    width:    50%; /* desired width */
}

.box:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

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

/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}
87
Sathran

シンプルかつニート：ビューポートの幅に応じて応答する高さ/幅にはvw単位を使用します。

vw：1 /ビューポートの幅の100分の1（ Source MDN ）

DEMO

HTML：

<div></div>

1：1のアスペクト比の場合、CSS

div{
    width:80vw;
    height:80vw; /* same as width */
}

必要な縦横比と要素の幅に従って高さを計算するための表。

   aspect ratio  |  multiply width by
    -----------------------------------
         1:1      |         1
         1:3      |         3
         4:3      |        0.75
        16:9      |       0.5625

この手法により、次のことが可能になります。

  • position:absolute;を使用せずに要素内にコンテンツを挿入する
  • 不要なHTMLマークアップはありません（1要素のみ）
  • vh単位を使用してビューポートの高さに応じて要素の縦横比を調整する
  • あなたは常にビューポートの高さと幅に応じてビューポートに収まるレスポンシブスクエアまたは他のアスペクト比を作ることができます（この答えを見てください： ビューポートの幅と高さに応じたレスポンシブスクエア またはこれ デモ ）

これらのユニットはIE9 +でサポートされています 詳細についてはcanIuse を参照してください -

64
web-tiki

非常に簡単な方法 jsfiddle

_ html _ 

<div id="container">
    <div id="element">
        some text
    </div>
</div>

_ css _ 

#container {
    width: 50%; /* desired width */
}

#element {
    height: 0;
    padding-bottom: 100%;
}
55
Ninjakannon

上下のパディング手法を拡張して、擬似要素を使用して要素の高さを設定することが可能です。フローとビューから疑似要素を削除するには、floatとnegativeのマージンを使用します。

これにより、余分なdivやCSSの配置を使用せずにコンテンツをボックス内に配置できます。

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}


/* proportions */

.fixed-ar-1-1::before {
  padding-top: 100%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-16-9::before {
  padding-top: 56.25%;
}


/* demo */

.fixed-ar {
  margin: 1em 0;
  max-width: 400px;
  background: #EEE url(https://lorempixel.com/800/450/food/5/) center no-repeat;
  background-size: contain;
}
<div class="fixed-ar fixed-ar-1-1">1:1 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>
8
Salman A

本当にこれはNathanの答えに対するコメントとして属しています、しかし私はまだそれをすることを許されていません...
箱に収めるには物が多すぎても、アスペクト比を維持したいと思いました。彼の例は縦横比を変えて、高さを広げています。追加しました

overflow: hidden;
overflow-x: auto;
overflow-y: auto;

.elementに役立ちました。 http://jsfiddle.net/B8FU8/3111/ を参照してください。

4
craq