我想創(chuàng)建一個響應(yīng)性的div，它可以隨著窗口寬度的變化而改變其寬度/高度。

有沒有什么CSS規(guī)則允許高度根據(jù)寬度變化，同時保持其縱橫比？

我知道我可以通過JavaScript做到這一點，但我更喜歡只用CSS。

只需創(chuàng)建一個包裝器& ltdiv & gt底部填充的百分比值，如下所示:

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

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

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

有幾種方法可以在像div這樣的元素上指定固定的縱橫比，下面是其中的兩種:

1.縱橫比CSS屬性

div {
  aspect-ratio: 1 / 1;
  width: 50%;
  background: teal;
}

<div>aspect-ratio: 1 / 1;</div>

使用縱橫比CSS屬性

<div class='demo'></div>

.demo {
  background: black;
  width: 500px;
  aspect-ratio: 4/3;
}

這個回答是在CSS實現(xiàn)長寬比之前寫的。這就是你今天應(yīng)該用的。

原答案

我偶然發(fā)現(xiàn)了我認為的解決這個問題的聰明辦法，使用& ltsvg & gt和顯示:網(wǎng)格。

一個display:grid元素允許你和它的兩個(或者更多)子元素使用相同的網(wǎng)格區(qū)域來占據(jù)相同的空間。 這意味著它們都是流動內(nèi)容，重疊的，并且由高的一個設(shè)置比例。

其中一個將是一個& ltsvg & gt負責(zé)設(shè)定比率。另一個，實際內(nèi)容。如果實際內(nèi)容很短，并且從未填滿整個比率(并且您只是希望它在具有該比率的空間中居中)，只需將其居中即可(參見下面的第一個runnable片段)。

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

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

設(shè)置& ltsvg & gt與你想要的比例:

& ltsvg視圖框= & quot0 0 4 3 & quot& gt& lt/SVG & gt； & ltsvg視圖框= & quot0 0 16 9 & quot& gt& lt/SVG & gt；

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 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>

我已經(jīng)找到了一種使用CSS來做到這一點的方法，但你必須小心，因為它可能會根據(jù)你自己網(wǎng)站的流量而變化。我這樣做是為了在我的網(wǎng)站的可變寬度部分嵌入具有恒定縱橫比的視頻。

假設(shè)您有一個這樣的嵌入式視頻:

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

然后，您可以將所有這些內(nèi)容放在一個帶有“video”類的div中。這個視頻類可能是你的網(wǎng)站中的流體元素，因此，它本身沒有直接的高度限制，但是當(dāng)你調(diào)整瀏覽器的大小時，它的寬度會根據(jù)網(wǎng)站的流動而改變。這可能是您在保持視頻的特定寬高比的同時，嘗試嵌入視頻的元素。

為了做到這一點，我在“video”類div中的嵌入對象之前放置了一個圖像。

！！！重要的是，圖像具有您希望保持的正確縱橫比。此外，確保圖像的大小至少與您根據(jù)布局期望視頻(或您維護的任何A.R .的大小)獲得的最小圖像一樣大。這將避免在按百分比調(diào)整圖像大小時出現(xiàn)任何潛在的圖像分辨率問題。例如，如果你想保持3:2的寬高比，不要僅僅使用3px乘2px的圖像。它可能在某些情況下有效，但是我還沒有測試過，避免它可能是個好主意。

你可能已經(jīng)為你的網(wǎng)站的流體元素定義了一個這樣的最小寬度。如果沒有，那么這樣做是一個好主意，這樣可以避免瀏覽器窗口變得過小時元素被截斷或重疊。在某些時候最好有一個小酒吧。網(wǎng)頁的最小寬度應(yīng)該在600像素左右(包括任何固定寬度的列),因為屏幕分辨率不會更小，除非你處理的是支持手機的網(wǎng)站。！！！

我使用一個完全透明的png，但我真的不認為如果你做得對，它會結(jié)束。像這樣:

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

現(xiàn)在，您應(yīng)該能夠添加類似于以下內(nèi)容的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%; }

確保還刪除了對象和嵌入標(biāo)記中任何顯式的高度或?qū)挾嚷暶鳎@些標(biāo)記通常與復(fù)制/粘貼的嵌入代碼一起出現(xiàn)。

其工作方式取決于video類元素的位置屬性，以及您希望保持特定縱橫比的項目。它利用了圖像在元素中調(diào)整大小時保持其適當(dāng)縱橫比的方式。它告訴視頻類元素中的任何其他元素，通過強制其寬度/高度為由圖像調(diào)整的視頻類元素的100%,來充分利用由動態(tài)圖像提供的不動產(chǎn)。

很酷，是吧？

您可能需要對它進行一些修改，以使它能夠與您自己的設(shè)計一起工作，但實際上它對我來說工作得非常好。大致的概念是有的。

Elliot啟發(fā)了我這個解決方案-謝謝:

aspectratio.png是一個完全透明的PNG文件，具有你喜歡的長寬比，在我的例子中是30x10像素。

超文本標(biāo)記語言

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

請注意:背景尺寸是css3的一個特性，可能不適用于你的目標(biāo)瀏覽器。您可以檢查互操作性(例如在caniuse.com上)。

由于@web-tiki已經(jīng)展示了一種使用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的預(yù)期高度。(100vw * 16 / 9 - 100vh)是溢出高度，因此，上拉溢出高度/2將使其保持在屏幕中心。

為景觀，并保持16:9，你顯示使用

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

9/16的比例很容易改變，不需要預(yù)先定義100:56.25或100:75。如果要先保證高度，就要切換寬度和高度，例如:高度:100vh寬度:calc(100vh * 9 / 16)適用于9:16縱向。

如果你想適應(yīng)不同的屏幕尺寸，你可能也會感興趣

背景尺寸蓋/容器 以上樣式類似于容器，取決于寬高比。 對象匹配 img/視頻標(biāo)簽的蓋子/容器 @media(方向:縱向)/@media(方向:橫向) 媒體查詢縱向/橫向以更改比例。 正如w3schools.com在此所述，并在這個公認的答案中有所重申，填充值為百分比(重點是我的):

以包含元素寬度的百分比指定填充

因此，保持16:9縱橫比的響應(yīng)式DIV的正確示例如下:

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

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

超文本標(biāo)記語言

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

JSFiddle上的演示

要添加到Web_Designer的答案中，& ltdiv & gt將具有其包含元素寬度的75%的高度(完全由底部填充組成)。這里有一個很好的總結(jié):http://mattsnider.com/ CSS-使用百分比邊距和填充/。我不知道為什么會這樣，但事情就是這樣。

如果希望div的寬度不是100%,則需要另一個換行div來設(shè)置寬度:

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媒體查詢來根據(jù)設(shè)備分辨率提供不同的徽標(biāo)文件，但仍然按比例縮放為& ltimg & gt自然會這樣做(我將徽標(biāo)設(shè)置為透明的背景圖像。具有正確縱橫比的png)。但是Web_Designer的解決方案將為我節(jié)省一個http請求。

使用CSS縱橫比屬性

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

https://web.dev/aspect-ratio/

如果你對如何使用它感興趣，看看下面這個超級簡單的例子

.yourClass {
   aspect-ratio: 4/3;
}

這是對web_designer的回答的改進:

使用偽元素代替包裝div 長寬比基于盒子的寬度，而不是它的父項 當(dāng)內(nèi)容變高時，框?qū)⒋怪崩?pre class="snippet-code-css lang-css prettyprint-override">.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。使容器/包裝器位置相對，首先將svg靜態(tài)定位，然后將絕對定位的內(nèi)容(top:0；左:0；右:0；底部:0；)

比例為16:9的示例:

image.svg:(可以在src中內(nèi)聯(lián))

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

請注意，內(nèi)聯(lián)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%;" />

我是這樣做的:

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

[data-aspect-ratio]:before {
    content: '';
    display: block;
}

[data-aspect-ratio] > * {
    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>

來源

基于你的解決方案，我做了一些小把戲:

當(dāng)你使用它時，你的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);
});

有了這個，你只需將屬性數(shù)據(jù)保持率設(shè)置為高/寬，就可以了。

我找到了一些更新鮮的方法來解決這個案子。這個解決方案是any padding-bottom方法的后代，但是沒有任何position: absolute children，只是使用了display:grid；和偽元素。

這里我們有。比率::在使用良好的舊填充之前-底部:XX%,網(wǎng)格面積:1/1/1/1；，它強制偽元素保持在網(wǎng)格中的位置。雖然這里我們有寬度:0；以防止主元素溢出(我們可以在這里使用z-index，但是這個更短)。

我們的主要元素。比率& gt*:第一個孩子的位置與相同。比::之前，也就是網(wǎng)格-面積:1/1/1/1；，所以它們共享同一個網(wǎng)格單元位置。現(xiàn)在，我們可以在div中放置任何內(nèi)容，偽元素是決定寬/高比的元素。關(guān)于網(wǎng)格區(qū)域的更多信息。

.ratio {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 200px; /* just for instance, can be 100% and depends on parent */  
}

.ratio::before {
  content: '';
  width: 0;
  padding-bottom: calc(100% / (16/9)); /* here you can place any ratio */
  grid-area: 1 / 1 / 1 / 1;
}

.ratio>*:first-child {
  grid-area: 1 / 1 / 1 / 1; /* the same as ::before */
  background: rgba(0, 0, 0, 0.1); /* just for instance */
}

<div class="ratio">
  <div>16/9</div>
</div>

雖然大多數(shù)答案都很酷，但大多數(shù)答案都要求圖片大小正確...其他解決方案僅適用于寬度，不考慮可用的高度，但有時您也想讓內(nèi)容適合某個高度。

我試圖將它們結(jié)合在一起，以帶來一個完全便攜和可重定大小的解決方案...訣竅是使用圖像的自動縮放，但使用內(nèi)嵌的svg元素，而不是使用預(yù)先呈現(xiàn)的圖像或任何形式的第二個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>

如果您想在縱向或橫向視圖(盡可能大，但不要粘在外面)的視口內(nèi)安裝一個正方形，請在縱向/橫向方向上使用vw/vh之間切換:

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

您可以通過使用SVG來實現(xiàn)這一點。

這取決于一個案例，但在某些情況下，它真的很有用。舉個例子——你可以設(shè)置背景圖片而不用設(shè)置固定高度或者用它來嵌入youtube & ltiframe & gt比率為16:9，位置:絕對等。

對于3:2的比率，設(shè)置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>

我想分享我的解決方案，其中我有一個img-tag填充某個縱橫比。我不能使用背景，因為缺乏CMS的支持，我不喜歡使用這樣的風(fēng)格標(biāo)簽:& ltimg style="background:url(...)"/>；。此外，寬度是100%，因此不需要像某些解決方案中那樣設(shè)置為固定大小。它會相應(yīng)地擴展！

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

對我來說，這種方法效果最好，所以我把它分享給其他人，這樣他們也能從中受益。

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

假設(shè)你有兩個div，外部的div是一個容器，內(nèi)部的可以是你需要保持其比例的任何元素(img或youtube iframe或其他)

html看起來像這樣:

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

假設(shè)您需要保持& quot元素& quot 比率= & gt4比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 */
}

當(dāng)以%指定時，填充是基于寬度而不是高度計算的。 .. 所以基本上，你的寬度和高度是無關(guān)緊要的，都是基于這個來計算的。這將保持比例。

只是一個想法或一個黑客。

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>

Chrome 88中的新特性是新的CSS長寬比屬性，其他瀏覽器也將很快推出。

aspect-ratio CSS屬性設(shè)置框的首選縱橫比，該縱橫比將用于計算自動大小和一些其他布局功能。

CSS技巧文章

更多信息

div {
  background: rebeccapurple;
  height:100px;
  margin:1em auto;
}

.square {
  aspect-ratio: 1 / 1;
  }

<div class="square">
  
</div>

CSS為此提供了一個新的屬性:縱橫比。

https://developer . Mozilla . org/en-US/docs/Web/CSS/aspect-ratio

@supports (aspect-ratio: 1 / 1) {
  div {
    aspect-ratio: 16 / 9;
    background-color: orange;
  }  
}

<div style="width: 200px"></div>
<hr />
<div style="width: 400px"></div>
<hr />
<div style="height: 50px"></div>
<hr />
<div style="height: 10px"></div>

新的aspect-ratio標(biāo)簽會很棒，但是它打亂了我的div的定位。 填充包裝器div的傳統(tǒng)解決方案是可行的，但是只根據(jù)父對象或視口的寬度調(diào)整大小，當(dāng)高度是限制因素時，這就成了問題。

我發(fā)現(xiàn)min()函數(shù)非常有用，并對傳統(tǒng)方法進行了如下調(diào)整:

body{
    background-image: linear-gradient(to top right, #FFE6B5, #B3CEBF);
    padding: 0;
    margin: 0 auto;
    overflow-y: hidden; /* this is to avoid scrolling when the height of the viewport is less than what the aspect ratio requires */
}

.wrapper {
    position: relative;
    width: 100vw;
    max-height: 100vh;
}
.sixteen-by-nine.aspect-ratio { 
    padding-bottom: 56.25% /* 9:16 ratio */
}
.content {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background-color: green
}

.centered {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: min(177.8vh, 100%); /* this always keeps a 16:9 ratio within the viewport */
    font-size: min(3vh,1.7vw); /* if you are also interested in scaling the font size */
    background-color: blue
}

<body>
  <div class="wrapper">
    <div class="sixteen-by-nine aspect-ratio"></div>
    <div class="content" >
      <div class="centered">
        <!-- stuff goes here -->
      </div>
    </div>
  </div>
</body>

假設(shè)您希望保持寬度為100像素，高度為50像素(即2:1) 做一下數(shù)學(xué)計算:

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

我剛剛創(chuàng)建了一個2:1的div，它可以調(diào)整大小以占據(jù)整個寬度，但如果它會導(dǎo)致頂部或底部超出，則會縮小寬度。但是請注意，這只適用于窗口的大小，不適用于父窗口的大小。

#scene {
    position: relative;
    top: 50vh;
    left: 50vw;
    width: 100vw;
    height: 50vw;
    max-height: 100vh;
    max-width: calc(100vh * 2);
    transform: translate(-50%, -50%);
}

我相信你可以計算出正確的百分比，用于4:3而不是2:1。

我們是這樣解決的:

.square {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  background: red;
  position: relative;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}

參見https://jsfiddle.net/r1jL3oqa/1/

我用了一種新的解決方案。

.squares{
  width: 30vw
  height: 30vw

與主長寬比

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

但是，這是相對于整個視口的。因此，如果您需要一個30%視口寬度的div，您可以使用30vw來代替，因為您知道寬度，您可以使用calc和vw unit在高度上重用它們。

這是我的解決方案，用于在具有可選固定邊距的div上保持16:9的縱向或橫向縱橫比。

它是寬度/高度和最大寬度/最大高度屬性與vw單位的組合。

在此示例中，懸停時添加了50px的頂部和底部邊距。

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.fixedRatio {
  max-width: 100vw;
  max-height: calc(9 / 16 * 100vw);
  width: calc(16 / 9 * 100vh);
  height: 100vh;
  
  /* DEBUG */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  font-size: 2rem;
  font-family: 'Arial';
  color: white;
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out; 
}

.fixedRatio:hover {
  width: calc(16 / 9 * (100vh - 100px));
  height: calc(100vh - 100px);
}

<div class='container'>
  <div class='fixedRatio'>
    16:9
  </div>
</div>