527

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

例

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

CSS

div {
  width: 80%;
  height: same-as-width
}
4

9 に答える 9

770

[更新: 私はこのトリックを独力で発見しましたが、Thierry Koblentzが私を打ち負かしたことをその後知りました。彼の2009 年の記事は A List Apart にあります。クレジットが必要な場合はクレジット。]

これは古い質問であることは知っていますが、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! */
}
<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

于 2011-07-07T19:28:58.440 に答える
496

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

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

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

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

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

于 2012-11-29T12:28:00.890 に答える
123

Javascriptなしで可能です:)

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%;
}
于 2013-11-21T09:49:24.827 に答える
90

シンプルでニート :vwビューポートの幅に応じて、レスポンシブの高さ/幅に単位を使用します。

vw :ビューポートの幅の 1/100。(ソース MDN )

デモ

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 を参照してください。

于 2014-05-13T20:16:18.863 に答える
85

jQueryを使用すると、これを実現できます

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

http://jsfiddle.net/n6DAu/1/で実際の例を確認してください

于 2011-03-26T21:46:20.103 に答える
72

非常に単純な方法jsfiddle

HTML

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

CSS

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

#element {
    height: 0;
    padding-bottom: 100%;
}
于 2015-02-26T23:52:04.680 に答える
12

上部/下部のパディング手法を拡張すると、疑似要素を使用して要素の高さを設定できます。浮動小数点と負のマージンを使用して、フローとビューから疑似要素を削除します。

これにより、追加の 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>

于 2014-11-26T11:04:30.127 に答える
4

本当にこれはネイサンの答えへのコメントとして属していますが、まだそれを行うことは許可されていません...
ボックスに収まりきらないものが多すぎる場合でも、アスペクト比を維持したかったのです。彼の例では、縦横比を変更して高さを拡大しています。追加していることがわかりました

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

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

于 2013-07-12T15:30:32.330 に答える
4

幅: 80vmin; 高さ: 80vmin;

CSS は、最小のビュー、高さ、または幅の 80% を実行します

http://caniuse.com/#feat=viewport-units

于 2014-11-04T06:17:43.447 に答える