作りたい divウィンドウの幅の変化に応じて幅/高さを変更できるます。

アスペクト比を維持しながら、幅に応じて高さを変更できるCSS3ルールはありますか？

JavaScriptを使用してこれを実行できることはわかっていますが、CSSのみを使用したいと思います。

次のように<div>、のパーセント値でラッパーを作成するだけpadding-bottomです。

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

/* demonstration purposed only : non-essential */
.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

<div class="demoWrapper">
  <div></div>
</div>

それは <div>コンテナの幅の75％に等しい高さ（アスペクト比4：3）になります。

これは、パディングについて次の事実に依存しています。

パーセンテージは、生成されたボックスの包含ブロックの幅を基準に計算されます[...]（ソース：w3.org、強調マイン）

他のアスペクト比と100％幅のパディングボトム値：

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

divにコンテンツを配置する：

divのアスペクト比を維持し、そのコンテンツが拡大されないようにするには、絶対配置された子を追加し、ラッパーの端までそれを拡大する必要があります。

div.stretchy-wrapper {
  position: relative;
}

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

ここにデモともう一つの詳細なデモがあります

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

例：正方形のdivの4x4グリッド

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>

ここで、このデモをいじるには、ここにするソリューションですverticalyとhorizo​​ntaly中心コンテンツと正方形の応答グリッドを。

vh / vwユニットのブラウザサポートはIE9 +です。詳細についてはcanIuseを参照してください

CSSを使用してこれを行う方法を見つけましたが、独自のWebサイトのフローによって変更される可能性があるため、注意が必要です。Webサイトの流動的な幅の部分に一定のアスペクト比でビデオを埋め込むためにそれを行いました。

次のような埋め込みビデオがあるとします。

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

次に、これをすべて「ビデオ」クラスを持つdiv内に配置できます。この動画クラスはおそらくWebサイトの流動要素であり、それ自体には直接の高さの制約はありませんが、ブラウザーのサイズを変更すると、Webサイトのフローに従って幅が変化します。これは、ビデオの特定のアスペクト比を維持しながら、埋め込みビデオを取得しようとしている要素です。

これを行うために、「video」クラスのdiv内の埋め込みオブジェクトの前に画像を配置します。

!!! 重要な部分は、画像に維持したい正しいアスペクト比があることです。また、画像のサイズが、ビデオ（またはARを維持しているもの）がレイアウトに基づいて取得することが予想される最小サイズ以上であることを確認してください。これにより、画像のパーセンテージがサイズ変更されたときに、画像の解像度に潜在的な問題が発生するのを防ぎます。たとえば、3：2のアスペクト比を維持したい場合は、3px x 2pxの画像を使用しないでください。状況によってはうまくいくかもしれませんが、私はテストしていません。おそらく避けることをお勧めします。

あなたはおそらくあなたのウェブサイトの流動要素のために定義されたこのような最小幅をすでに持っているはずです。そうでない場合は、ブラウザウィンドウが小さくなりすぎたときに要素が途切れたり、重なり合ったりしないようにするために、そうすることをお勧めします。ある時点でスクロールバーを使用することをお勧めします。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%; }

オブジェクト内の明示的な高さまたは幅の宣言と、通常はコピー/貼り付けられた埋め込みコードに付属する埋め込みタグも必ず削除してください。

それが機能する方法は、ビデオクラス要素の位置プロパティと、必要なアイテムが特定のアスペクト比を維持していることに依存します。要素でサイズ変更されたときに画像が適切なアスペクト比を維持する方法を利用します。それは、ビデオクラス要素にある他のすべてのものに、その画像の幅/高さをビデオクラス要素の100％に強制的に調整することにより、動的画像によって提供される不動産を最大限に活用するように伝えます。

かっこいいね

独自のデザインで動作させるには、少し試してみる必要があるかもしれませんが、これは実際には私にとっては驚くほどうまくいきます。一般的な概念があります。

エリオットは私にこの解決策を促しました-ありがとう：

aspectratio.png 完全に透明なPNGファイルで、好みのアスペクト比のサイズで、私の場合は30x10ピクセルです。

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-featureです。相互運用性をチェックできます（fe on caniuse.com）。

Web_Designerの回答に追加するため<div>、の高さ（全体が下のパディングで構成されます）は、それを含む要素の幅の75％になります。ここに良い要約があります：http : //mattsnider.com/css-using-percent-for-margin-and-padding/。なぜそうなのかはわかりませんが、それはそうです。

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;
}

私は最近、Elliotの画像トリックに似たものを使用して、CSSメディアクエリを使用して、デバイスの解像度に応じて異なるロゴファイルを提供できるようにしましたが、通常どおりに比例して拡大縮小<img>します（ロゴを背景画像として透明な.pngに設定します）正しいアスペクト比で）。しかし、Web_Designerのソリューションでは、httpリクエストを節約できます。

で述べたようにw3schools.comにここに、ややこれに反復受け入れ答え、パーセンテージ（強調鉱山）などの値をパディング：

含む要素の幅のパーセントでパディングを指定します

エルゴ、アスペクト比16：9を維持するレスポンシブDIVの正しい例は次のとおりです。

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のデモ

@ web-tikiはすでにvh/ を使用する方法を示しているvwので、画面の中央に配置する方法も必要です。ここに、9：16の縦向きのスニペットコードがあります。

.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 : 16縦向き）。

さまざまな画面サイズに対応したい場合は、

• 背景サイズのカバー/含む
  • 上記のスタイルは、containに似ており、width：heightの比率に依存します。
• オブジェクトフィット
  • img / videoタグのカバー/コンテナ
• @media (orientation: portrait)/@media (orientation: landscape)
  • portrait/のメディアクエリでlandscape比率を変更します。

これは受け入れられた回答の改善です：

• ラッパーdivの代わりに擬似要素を使用します
• アスペクト比は、親ではなくボックスの幅に基づいています
• コンテンツが高くなると、ボックスは垂直方向に伸びます

.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>

私がつまずいたスマートなソリューション使用<svg>してdisplay:grid。

グリッド要素を使用すると、高さを設定する要素を指定する必要なく、2つ（またはそれ以上）の要素で同じスペースを占めることができます。つまり、箱から出してすぐに、背の高い方が比率を設定します。

これは、コンテンツが「比率」全体を満たすのに十分な高さにならないことがわかっていて、このスペースにコンテンツを配置する方法（つまり、両方向の中央にコンテンツを配置する方法）を探している場合に、そのまま使用できることを意味します display:flex; align-items:center; justify-content:center）。
これ<img>はdisplay:block、事前定義された比率で透明を使用するのとほとんど同じ<svg>ですが、が軽く、変更がかなり簡単です（必要に応じて比率を応答的に変更するため）。

<div class="ratio">
  <svg viewBox="0 0 1 1"></svg>
  <div>
    I'm square
  </div>
</div>

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/1/1;
}

あなたがする必要があるのは<svg>s比を変えることだけです：

• <svg viewBox="0 0 4 3"></svg>
• <svg viewBox="0 0 16 9"></svg>

それが機能しているのを見てください：

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/1/1;
}

/* below code NOT needed for setting the ratio 
 * I just wanted to mark it visually
 * and center contents
 */
.ratio div {
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="ratio">
  <svg viewBox="0 0 7 1"></svg>
  <div>
    Fixed ratio 7:1
  </div>
</div>

（オーバーフローが非表示または自動で）背が高いときにコンテンツ要素が比率を設定できないソリューションが必要な場合はposition:relative、グリッドとposition:absolute; height:100%; overflow-y: auto;コンテンツに設定する必要があります。例：

.ratio {
  display: grid;
  position: relative;
}
.ratio > * {
  grid-area: 1/1/1/1;
}


.ratio > div {
  height: 100%;
  overflow-y: auto;
  position: absolute;
  
  /* the rest is not needed */
  border: 1px solid red;
  padding: 0 1rem;
}

<div class="ratio">
  <svg viewBox="0 0 7 1"></svg>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A scelerisque purus semper eget. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. A cras semper auctor neque vitae tempus quam pellentesque nec. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Arcu odio ut sem nulla. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Cras tincidunt lobortis feugiat vivamus at augue eget. Laoreet sit amet cursus sit amet. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Leo in vitae turpis massa sed elementum tempus egestas sed. Egestas integer eget aliquet nibh. Dolor sit amet consectetur adipiscing elit.

<p>Ut aliquam purus sit amet. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Diam in arcu cursus euismod quis viverra nibh. Nullam vehicula ipsum a arcu cursus vitae congue. Vel orci porta non pulvinar neque laoreet suspendisse. At tellus at urna condimentum mattis pellentesque. Tristique senectus et netus et malesuada. Vel pretium lectus quam id leo in. Interdum velit euismod in pellentesque. Velit euismod in pellentesque massa placerat duis. Vitae suscipit tellus mauris a diam maecenas sed enim.

<p>Mauris a diam maecenas sed enim ut sem. In hendrerit gravida rutrum quisque. Amet dictum sit amet justo donec enim diam. Diam vulputate ut pharetra sit amet aliquam id. Urna porttitor rhoncus dolor purus non enim praesent. Purus in massa tempor nec feugiat nisl pretium. Sagittis vitae et leo duis ut. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Aliquam purus sit amet luctus venenatis lectus magna. Sit amet purus gravida quis blandit turpis. Enim eu turpis egestas pretium aenean. Consequat mauris nunc congue nisi. Nunc sed id semper risus in hendrerit gravida rutrum. Ante metus dictum at tempor. Blandit massa enim nec dui nunc mattis enim ut.
  </div>
</div>

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

使用すると、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をheight / widthに設定するだけです。

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をURLエンコードして、次のように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%;" />

私の場合、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>

ソース

ほとんどの回答は非常に優れていますが、ほとんどの場合、画像のサイズを正しく設定する必要があります...他の解決策は、幅に対してのみ機能し、利用可能な高さを気にしませんが、コンテンツを特定の高さに合わせる場合もあります。 。

完全にポータブルでサイズ変更可能なソリューションをもたらすためにそれらを結合しようとしました...トリックは、画像の自動スケーリングに使用しますが、事前にレンダリングされた画像や任意の形式の代わりにインライン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にしています

ただのアイデアかハック。

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>

2つのdivがあるとします。外側のdivはコンテナーで、内側はその比率を維持するために必要な任意の要素（imgまたはyoutube iframeなど）にすることができます。

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

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

「要素」の比率を維持する必要があるとしましょう

比率=> 4対1または2対1 ...

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 */
}

％で指定されたパディングは、高さではなく幅に基づいて計算されます。..したがって、基本的には、幅に基づいて高さが常に計算される幅は問題ではありません。比率を維持します。

ポートレートビューまたはランドスケープビューのビューポート内に正方形をフィットさせたい場合（できるだけ大きくしますが、外側に何も表示されないようにする場合）、vw/のvh向きを使用して切り替えますportrait/ landscape：

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 

img特定のアスペクト比を満たす-タグがある私のソリューションを共有したいと思います。backgroundCMSのサポートが不足しているため使用できず、次のようなスタイルタグを使用したくありません<img style="background:url(...)" />。また、幅は100％であるため、一部のソリューションのように固定サイズに設定する必要はありません。レスポンシブにスケーリングされます！

.wrapper {
  width: 50%;
}

.image-container {
  position: relative;
  width: 100%;
}

.image-container::before {
  content: "";
  display: block;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-4-3::before {
  padding-top: 75%;
}

.ratio-3-1::before {
  padding-top: calc(100% / 3);
}

.ratio-2-1::before {
  padding-top: 50%;
}

<div class="wrapper"> <!-- Just to make things a bit smaller -->
  <p>
  Example of an 4:3 aspect ratio, filled by an image with an 1:1 ratio.
  </p>
  <div class="image-container ratio-4-3"> <!-- Lets go for a 4:3 aspect ratio -->
    <img src="https://placekitten.com/1000/1000/" alt="Kittens!" />
  </div>
  <p>
  Just place other block elements around it; it will work just fine.
  </p>
</div>

この問題に何度も遭遇したため、JSソリューションを作成しました。これは基本的に、指定した比率で要素の幅に応じてdomElementの高さを調整します。次のように使用できます。

<div ratio="4x3"></div>

要素の高さを設定しているため、要素はa display:blockまたはのいずれかにする必要があることに注意してくださいdisplay:inline-block。

https://github.com/JeffreyArts/html-ratio-component

SVGを使用してそれを実現できます。

場合によって異なりますが、場合によっては非常に便利です。例として-あなたが設定することができbackground-image、固定の高さを設定することなく、またはユーチューブを埋め込むためにそれを使用する<iframe>割合と16:9し、position:absoluteなど

以下のための3:2比設定viewBox="0 0 3 2"と上のようにします。

例：

div{
    background-color:red
}
svg{
    width:100%;
    display:block;
    visibility:hidden
}

.demo-1{width:35%}
.demo-2{width:20%}

<div class="demo-1">
  <svg viewBox="0 0 3 2"></svg>
</div>

<hr>

<div class="demo-2">
  <svg viewBox="0 0 3 2"></svg>
</div>

幅：100pxと高さ：50px（つまり2：1）を維持したいとします。次の計算を行ってください：

.pb-2to1 {
  padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}

フラックスレイアウト（FWD）を使用できます。

https://en.wikipedia.org/wiki/Adaptive_web_design

それはレイアウトをスケーリングして維持しますが、少し複雑ですが、（RWD）のようにコンテンツをプッシュせずにページのサイズを変更できます。

レスポンシブのように見えますが、スケーリングです。https://www.youtube.com/watch?v=xRcBMLI4jbg

CSSスケーリング式はここにあります：

http://plugnedit.com/pnew/928-2/

canvas要素を使用して、アスペクト比を維持する簡単な方法。

以下のdivのサイズを変更して、実際の動作を確認してください。

私にとっては、このアプローチが最も効果的だったので、他の人と共有して、彼らからも利益を得られるようにしています。

.cont {
  border: 5px solid blue;
  position: relative;
  width: 300px;
  padding: 0;
  margin: 5px;
  resize: horizontal;
  overflow: hidden;
}

.ratio {
  width: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

動的な高さでも動作します！

.cont {
  border: 5px solid blue;
  position: relative;
  height: 170px;
  padding: 0;
  margin: 5px;
  resize: vertical;
  overflow: hidden;
  display: inline-block; /* so the div doesn't automatically expand to max width */
}

.ratio {
  height: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

新しいソリューションを使用しました。

.squares{
  width: 30vw
  height: 30vw

主アスペクト比

.aspect-ratio
  width: 10vw
  height: 10vh

ただし、これはビューポート全体に対するものです。したがって、ビューポートの幅の30％のdivが必要な場合は、代わりに30vwを使用できます。幅がわかっているので、calcとvwユニットを使用して高さを再利用します。

さて、私たちは最近使用する機能を受け取りました aspect-ratio CSSでプロパティ。

https://twitter.com/Una/status/1260980901934137345/photo/1

注：サポートはまだ最高ではありません...

https://caniuse.com/#search=aspect-ratio

コンテナー構造全体がパーセンテージベースである場合、これがデフォルトの動作になります。より具体的な例を提供できますか？

以下は私の意味の例です。親階層全体が％ベースの場合、ブラウザーウィンドウの調整は追加のjs / cssなしで機能しますが、これはレイアウトで可能ではありませんか？

<div style="width: 100%;">
   <div style="width: 50%; margin: 0 auto;">Content</div>
</div>