を維持する比率のdiv CSS

Question

作りたい div を変えることのできる幅と高さのウィンドウの幅は変化します。

はありまCSS3規定することで高さを変化に応じて、幅 と、縦横比?

思いでこのよJavaScriptには、希望のみを使用。

Answer 1

を作成し、ラッパー <div> 割合の値 padding-bottom, このよう:

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

<div></div>

ることができない <div> 高さ等の75%の幅のコンテイナー(4:3アスペクト比）であった。

これに依存して、そのためのpadding:

比率の算出に関して 幅 に発生するボックスの含有ブロック[...]（出典： w3.org, 重視鉱)

パディング-ボトム値のその他の側面の比率が100%の幅：

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

---

けのコンテンツ部門:

するためのアスペクト比の防止そのコンテンツからストレッチングでを追加する必要があります絶対位置の子どもを伸ばすの端にラッパー：

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

この デモ もより深 デモ

Answer 2

vw 単位

利用できる vw ユニットの両方の 幅と高さ あるものにしていく所存です。この要素の縦横比を保存する、ビューポートの幅になります。

vw:1/100の幅がビューポートです。[MDN]

また、お客様の使用もできます vh のためのビューポートの高さも vmin/vmax 利用の少ない/大きいのビューポートの寸法論 こちらの).

例:1:1の比率

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

<div></div>

その他アスペクト比で以下のテーブルの算出値の高さに応じて要素の幅:

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

例:4x4のグリッドスクエアdivs

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  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>

こちらは 怒このデモ ここではシングソリューションを 対応グリッドの色と馴染ませ、horizontalyを中心にコンテンツ.

---

ブラウザ支援のためのvh/vw台はIE9+見 canIuseのための詳細情報

Answer 3

私はこの使用してCSSを行うための方法を見つけましたが、あなたはそれがあなた自身のウェブサイトの流れに応じて変更されることがありよう注意する必要があります。私は私のウェブサイトの流体幅部内の一定のアスペクト比でビデオを埋め込むためにそれをやった。

このように埋め込まれたビデオあなたが持っていると言います

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

これで、「ビデオ」クラスで、すべてのdivの内側にこれを置くことができます。このビデオクラスには、おそらくそれ自体で、それが直接の高さの制約を持たないように、というあなたのウェブサイト内の流体要素になりますが、あなたは、ブラウザのサイズを変更する場合には、ウェブサイトの流れに応じて幅が変化します。これはおそらく、ビデオの特定のアスペクト比を維持したままで、あなたの埋め込まれたビデオを取得しようとしている要素になります。

これを行うためには、私は、「ビデオ」クラスのdiv要素の中に埋め込まれたオブジェクトの前に画像を置きます。

!!!重要な部分は、画像は、あなたが維持したい正しいアスペクト比を有することです。また、画像のサイズが最小とあなたがビデオを期待する（またはものは何でものA.R.を維持している）あなたのレイアウトに基づいて取得する少なくとも同じ大きさであることを確認してください。それは割合、サイズが変更されたときこれは、画像の解像度で任意の潜在的な問題を避けることができます。たとえば、3のアスペクト比を維持したい場合：ちょうど2ピクセルの画像で3pxを使用していない、2。これは、いくつかの状況下で働くかもしれないが、私はそれをテストしていない、そしておそらく避けるために良いでしょう。

あなたはおそらくすでにあなたのウェブサイトの流体要素のために定義され、このような最小の幅を持っている必要があります。そうでない場合には、要素をオフにチョッピングやブラウザのウィンドウが小さすぎる取得するときの重複を避けるためにそうするのは良いアイデアです。いくつかの点で、スクロールバーを持っている方が良いです。あなたは携帯電話と相性の良いサイトを扱っている場合を除き、画面解像度が小さい来ていないので、Webページを取得する必要幅の最小はどこか（任意の固定幅列を含む）〜600PX程度です。 !!!

私は完全に透過PNGを使用しますが、私は本当にそれはあなたが右のそれを行う場合には異物感終わるとは思いません。このように：

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

これは、次のようなCSSを追加することができる必要があります：

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

あなたはまた、通常のコピー/貼り付け埋め込みコードが付属して明示的な高さやobjectタグとembedタグ内で幅の宣言を削除していることを確認します。

それが動作する方法は、ビデオクラス要素の位置特性に依存して、必要な項目は、特定のアスペクト比を維持しています。これは、要素にサイズ変更するとき画像が適切なアスペクト比を維持する方法を利用します。なお、画像によって調整されているビデオクラス要素の100％までその幅/高さを強制することにより、動的な画像が提供する不動産のフル活用するために、ビデオクラス要素である任意の他伝えます。

かなりクール、えっ？

あなたはそれがあなた自身のデザインで動作するように取得することで少し遊んでする必要がある場合がありますが、これは実際に私のために驚くほどよく働きます。一般的な概念があります。

Answer 4

Web_Designerの答えに追加するには、<div>はそれの幅の75％の高さは（完全に下パディングで構成された）の含む要素のですがあります。 http://mattsnider.com/css-using-percent-for-：ここでは良い要約ですマージンとパディング/ に。私はこれがそうであるべき理由はわからないんだけど、それはそれはある方法です。

あなたのdivが100％以外の幅になりたい場合は、

、あなたが幅を設定する上で別のラッピングのdivを必要があります。

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

私は最近、私は、デバイスの解像度に応じて、異なるロゴファイルを提供するためにCSSメディアクエリを使用しますが、まだ<img>が自然に行うように比例拡張できるようにするためにエリオットの画像トリックに似たものを使用する（私は背景画像としてロゴを設定しました正しいアスペクト比を有する透明.PNG）。しかしWeb_Designerのソリューションは、私にhttpリクエストを救うます。

Answer 5

エリオットは、このソリューションに私を触発 - 感謝ます：

aspectratio.pngは、私の場合30x10ピクセルで、お好みのアスペクト比の大きさに完全に透過PNGファイルです。

HTML

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

の注：のbackground-sizeは、あなたのターゲットのブラウザでは動作しない場合がありますCSS3-機能です。あなたが（ caniuse.com の上f.e.）の相互運用性を確認することがあります。

Answer 6

記 ここではw3schools.com ややや繰り返してこの 受け答え, paddingの値として比率（重鉱):

指定のパディングはの幅 を含む要素

エルゴには、訂正の対応本部長が、アスペクト比16:9でして

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

デモにJSFiddle

Answer 7

私はいくつかのトリックを作った、あなたのソリューションに基づか

あなたがそれを使用する場合は、あなたのHTMLのみとなります。

<div data-keep-ratio="75%">
    <div>Main content</div>
</div>

この方法が作る、それを使用するには： CSSます：

*[data-keep-ratio] {
    display: block;
    width: 100%;
    position: relative;
}
*[data-keep-ratio] > * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

とJS（jQueryの）

$('*[data-keep-ratio]').each(function(){ 
    var ratio = $(this).data('keep-ratio');
    $(this).css('padding-bottom', ratio);
});

そして、これは、あなただけの高さ/幅のattr data-keep-ratioを設定し、それはそれだたます。

Answer 8

あなたはSVGを使用することができます。容器/ラッパー位置を作る、などの静的に配置し、次に絶対位置コンテンツ置く最初のSVGを置く（トップ：0;左：0;右：0;底：0;）

16を持つ例：9の割合

image.svg：（SRCにインライン化することができます）。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

CSSます：

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

HTMLます：

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

そのインラインSVGが動作していないようですが、あなたはSVGをURLENCODEし、このようなのimg src属性でそれを埋め込むことができます

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />

Answer 9

として@web-tikiでショーを利用する方法 vh/vw, また、アンロックシステムセンターの画面では、このスニペットコード 9:16 portrait.

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateY 今このセンターの画面になります。 calc(100vw * 16 / 9) は高さ9/16.(100vw * 16 / 9 - 100vh) はオーバーフローの高さで、引き上げ overflow height/2 り続けていきたいと思っていセンターの画面になります。

ランドスケープ、 16:9, ョンの例を示して使用

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

の比率9/16は容易に変更も必要としない定義済み 100:56.25 または 100:75.したい場合は高さを確保していただくべきスイッチ幅、高さ、など height:100vh;width: calc(100vh * 9 / 16) 9:16portrait.

だいたい予測を算出するのに使用した、異なる画面サイズで、利

• 背景-サイズ カバーを含む
  • 上記のスニーカーをメインを含む、幅：高さの比である。
• オブジェクトフィット
  • カバーを含むのためのimg/videoタグ
• @media (orientation: portrait)/@media (orientation: landscape)
  • メディア検索 portrait/landscape の比となります。

Answer 10

この改善を受け答え:

• 使用の疑似要素の代わりにラッパー divs
• の比率に基づくボックスの幅の代わりにその親会社
• のボックスのレビューは参考になりました垂直のコンテンツが高

.box {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #CCC;
}

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

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

.width-50 {
  display: inline-block;
  width: 50%;
}
.width-20 {
  display: inline-block;
  width: 20%;
}

<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>

Answer 11

SCSSは、私の場合は最適なソリューションです。データ属性を使用します：

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;

    &:before {
        content: '';
        display: block;
    }

    > * {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
[data-aspect-ratio="3:1"]:before {
    padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}

例

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

ソースの

Answer 12

ただ、アイデアやハックます。

div {
  background-color: blue;
  width: 10%;
  transition: background-color 0.5s, width 0.5s;
  font-size: 0;
}

div:hover {
  width: 20%;
  background-color: red;
}
  
img {
  width: 100%;
  height: auto;
  visibility: hidden;
}

<div>
  <!-- use an image with target aspect ratio. sample is a square -->
  <img src="http://i.imgur.com/9OPnZNk.png" />
</div>

Answer 13

はoutherのdiv要素は、容器と内側は、あなたがその比（IMGやユーチューブはiframeまたは何を）維持するために必要なすべての要素

可能性がある2つのdivを持って言うことができます

HTMLは次のようになります：

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->

あなたは「要素」

の比率を維持する必要があると言うことができます

1又は1~2の比=> 4 ...

CSSは次のようになります。

.container{
  position: relative;
  height: 0
  padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/

}

.element{
  width : 100%;
  height: 100%;
  position: absolute; 
  top : 0 ;
  bottom : 0 ;
  background : red; /* just for illustration */
}

それは幅ではない高さに基づいて算出される％で指定された

パディング。 。.. そう、基本的にそれはあなたの幅も高さが常にそのことをもとに計算されるかは重要ではありません。その比率を維持します。

Answer 14

ほとんどの答えは非常にクールですが、それらのほとんどはイメージを持っている必要がすでに...他のソリューションは、幅のみのために働くし、利用可能な高さの世話、時にはあなたがコンテンツに合わせてしたくない正しいサイズあまりにも一定の高さ。

私は完全に移植して再かなりのソリューションを持って一緒にカップルそれらに試してみた...トリックは、画像の自動スケーリングを使用することですが、代わりに、プリレンダリングされた画像を使用してのインラインSVG要素を使用しますか、 2番目のHTTPリクエストのいずれかの形...

div.holder{
  background-color:red;
  display:inline-block;
  height:100px;
  width:400px;
}
svg, img{
  background-color:blue;
  display:block;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
}
.content_sizer{
  position:relative;
  display:inline-block;
  height:100%;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(155,255,0,0.5);
}

<div class="holder">
  <div class="content_sizer">
    <svg width=10000 height=5000 />
    <div class="content">
    </div>
  </div>
</div>

それはそれだけ縮小することができ、最大予想サイズよりも大きくする必要がありますように私は、幅と高さに大きな値を使用していた

通知は、SVGの属性。一例では、DIVの比率10を作る：5