维持使用CSS的DIV的纵横比

Question

我想创建一个响应式 div ，该可以随着窗口的宽度而改变其宽度/高度。

是否有任何CSS规则可以使高度根据宽度，变化，同时保持其长宽比？

我知道我可以通过JavaScript执行此操作，但是我希望只使用CSS。

）

Answer 1

只需创建一个包装器＆lt; div＆gt; 具有 padding bottom 的百分比值，例如：

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

它将导致高度等于其容器宽度的75％（4：3纵横比）的高度等于75％。

这取决于以下事实：

该百分比是根据生成盒的包含块[...]的宽度计算的（来源： 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;
}

这是一个 demo 和另一个更深入 demo

Answer 2

有几种方法可以在元素上指定固定的长宽比，其中有2个：

1。

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

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

这是最简单，最灵活的解决方案。它直接指定了元素的固定宽度至高度（或高度至宽度）。这意味着您还可以根据元素高度。
指定纵横比。
它不依赖于父宽度（例如填充技术）或视口大小（例如以下 vw 单元技术），它依赖于元素自己的宽度或高度更多信息mdn 。与其他解决方法相比，这就是使其如此强大的原因。

这是现代财产（2021）。所有现代浏览器都支持它，请参见 caniuse for精确浏览器支持。

以下是一些具有不同纵横比的示例：

.ar-1-1  {aspect-ratio: 1 / 1;}
.ar-3-2  {aspect-ratio: 3 / 2;}
.ar-4-3  {aspect-ratio: 4 / 3;}
.ar-16-9 {aspect-ratio: 16 / 9;}
.ar-2-3  {aspect-ratio: 2 / 3;}
.ar-3-4  {aspect-ratio: 3 / 4;}
.ar-9-16 {aspect-ratio: 9 / 16;}


/** For the demo : **/
body {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
}
div {
  background: teal;
  width: 23%;
  margin:1%;
  padding:20px 0;
  box-sizing: border-box;
  color:#fff;
  text-align:center;
}

<div class="ar-1-1">aspect-ratio: 1 / 1;</div>
<div class="ar-3-2">aspect-ratio: 3 / 2;</div>
<div class="ar-4-3">aspect-ratio: 4 / 3;</div>
<div class="ar-16-9">aspect-ratio: 16 / 9;</div>
<div class="ar-2-3">aspect-ratio: 2 / 3;</div>
<div class="ar-3-4">aspect-ratio: 3 / 4;</div>
<div class="ar-9-16">aspect-ratio: 9 / 16;</div>

2。使用 vw 单位：

您可以将 vw 单位用于元素的宽度和高度。这允许保留元素的长宽比，基于视口宽度。

vw：观察口宽度的1/100。 [ mdn> 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

示例：正方形divs的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>

这是带有此演示的小提琴，这是使A

---

浏览器对VH/VW单元的支持是IE9+请参阅 caniuse有关更多信息

Answer 3

使用 faction-ratio css属性

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

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

Answer 4

该答案是在CSS中实现方面比例之前编写的。这就是您今天应该使用的 。

---

原始答案

我偶然发现了我所考虑的使用＆lt; svg＆gt; 和显示：网格。

显示：Grid 元素允许您使用相同的 grid-area 。
这意味着它们都是流量含量，重叠的，并且从开箱即用设定了比率 。

其中之一将是负责设置比率的＆lt; svg＆gt; 。另一个实际内容。如果实际内容很短，并且永远不会填充整个比率（并且您只想以该比率为中心的空间中心），只需将其居中（请参见下面的第一个可运行的片段）。

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

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

SET ＆lt; svg＆gt; 的比率与您想要的任何东西：

• ＆lt; svg viewbox =“ 0 0 4 3”＆gt;＆lt;＆lt;/svg＆gt; ＆lt; svg; svg; svg;
• svg; svg ViewBox =“ 0 0 16 9”＆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>

---

如果您需要一个解决方案，其中内容元素具有更多的内容，则需要将其限制为具有所需比例的可滚动区域，请设置位置：父母上的相对， 位置：absolute;身高：100％；在内容上溢出Y：auto; ，允许流量内容元素（＆lt; svg＆gt; ）设置大小，因此比率。

.ratio {
  display: grid;
  position: relative;
}
.ratio > * {
  grid-area: 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 2"></svg>
  <div>
    <h1>Fixed ratio 7:2</h1>
    <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>

---

正如@emjay在下面的评论中指出的那样，只要它正确编码，就可以将比率SVG放在父母的伪元素之一中：

.three-squares {
  display: grid;
  border: 1px solid red;
}

.three-squares > *, .three-squares:before {
  grid-area: 1/1;
}

.three-squares:before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 1'%3E%3C/svg%3E");
  line-height: 0;
}

<div class="three-squares">  
  <div>I'm 3:1</div>
</div>

当在伪元素中使用时，＆lt; svg＆gt; 变成替换元素，默认情况下，它位于可变高度的基线（ 4px 在Chrome中， 3.5px 在Firefox中）。基线的高度根据 line-height 而变化，这就是为什么我们需要在伪造上设置 line-height：0 以获得准确的比率。更多详细信息在这里。

---

我个人更喜欢＆lt; svg＆gt; 放置在标记中的版本，因为我可以拥有一个与各种比率容器的单个类（ .ratio ）（相反）要为每个单独比率提供课程）。

Answer 5

我找到了一种使用CSS来执行此操作的方法，但是您必须小心，因为它可能会根据您自己的网站的流程而改变。我这样做是为了将视频嵌入我网站的流体宽度部分中的视频。

假设您有一个类似的嵌入式视频：

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

然后，您可以将所有视频放在Div中，上面有“视频”课。该视频类可能是您网站中的流体元素，因此它本身没有直接的高度约束，但是当您调整浏览器大小时，它会根据网站的流量而变化。这将是您可能正在尝试获取嵌入式视频的元素，同时保持视频的一定纵横比。

为了做到这一点，我将图像放在“视频”类div中的嵌入式对象之前。

!!!!重要的部分是图像具有您希望维护的正确纵横比。另外，请确保图像的大小至少与您期望的视频（或所维护AR的任何内容）所获得的最小的大小相同。这将避免在图像衡量百分比时解决图像的任何潜在问题。例如，如果您想保持纵横比为3：2，则不要仅使用2PX图像。它可能在某些情况下起作用，但我没有测试过，这可能是个好主意。

您可能应该已经有一个最小宽度，例如为网站的流体元素所定义的。如果没有，那么这样做是一个好主意，以免在浏览器窗口太小时切碎元素或重叠。最好在某个时候拥有滚动条。网页应获得的宽度最小的位置约为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％，以全面利用动态图像提供的房地产。

很酷，嗯？

您可能需要进行一些操作才能使其与自己的设计一起使用，但这实际上对我来说效果很好。一般概念在那里。

Answer 6

Elliot启发了我进入此解决方案 - 谢谢：

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

请注意： 背景大小是CSS3-Feature，可能无法与您的目标螺旋体配合使用。您可以检查互操作性（Fe on caniuse.com ）。

Answer 7

由于 @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）是溢流高度溢流高度/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 。如果您想先确保高度，则应切换宽度和高度，例如高度：100VH；宽度：calc（100VH * 9/16） 9:16 肖像。

如果您想适应不同的屏幕尺寸，也可能感兴趣

• 背景大小封面/包含
  • 上面的样式类似于包含，取决于宽度：高度比。
• object-fit
  • 封面/包含IMG/视频标签
• @Media（eTrientation：Portrait）/ @media（entrientation：landscape）
  • 肖像/景观更改比率的媒体查询。

Answer 8

如接受答案，填充值是百分比（强调我的）：

指定包含元素的宽度百分比

，一个响应式DIV的正确示例，该响应型Div保持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 9

使用CSS faction-ratio 属性

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

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

如果您有兴趣如何使用它 - 请查看以下超级简单示例

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

Answer 10

要添加到Web_designer的答案中，＆lt; div＆gt; 将具有包含元素的其宽度的75％的高度（完全由底部填充）。这是一个很好的摘要： http://mattsnider.com/css-using-percent-percent-percent-percent-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;
}

我最近使用了与Elliot类似的图像技巧相似的东西，以便我使用CSS媒体查询来根据不同的徽标文件提供其他徽标文件在设备分辨率上，但仍以成比例地缩放为＆lt; img＆gt; 自然会执行（我将徽标作为背景图像设置为具有正确方面的透明.png 比率）。但是Web_designer的解决方案可以为我节省HTTP请求。

Answer 11

这是对：

• 使用伪元素，而不是包装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 12

您可以使用SVG。使容器/包装器位置亲戚，将SVG首先放置为静态定位，然后放置绝对定位的内容（TOP：0;左：0;右：0; botton; bottom; bottom;）

示例具有16：9比例：

image.svg：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似乎不起作用，但是您可以urlencode svg并将其嵌入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 13

我的做法是：

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

source

Answer 14

基于您的解决方案，我已经做了一些技巧：

当您使用它时，您的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 15

使用伪元素的网格和填充物，

我找到了一些更新鲜的方法来解决这种情况。该解决方案是任何 padding bottom 方法的后代，但是没有任何位置：绝对儿童，只需使用 display> display：grid; and pseudo元素。

在这里，我们有 .ratio :: < / code>带有良好的旧 padding-bottom：xx％< / code>和 grid-area：1/1/1/1; < / code >，这迫使伪元素将位置保持在网格中。尽管在这里我们有 width：0; 以防止此元素溢出的主要元素（我们冷使用 z-index 在这里，但这较短）。

和我们的主要元素 .ratio＆gt; *：First-Child < / code>具有与 .ratio :: < / code>之前的位置相同的位置他们俩都共享相同的网格单元。现在，我们可以将任何内容放在DIV中，伪元素是确定宽度/高度比率的内容。有关 grid-area 的更多信息。

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

---

尽管您可以使用 style 属性使用CSS VAL并将比例放在HTML中。还可以使用显示：Inline-Grid 。

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

.ratio::before {
  content: '';
  width: 0;
  padding-bottom: calc(100% / (var(--r))); /* 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" style="--r: 4/3;">
  <div>4/3</div>
</div>

<div class="ratio" style="--r: 16/9;">
  <div>16/9</div>
</div>

Answer 16

虽然大多数答案都很酷，但大多数答案都需要正确尺寸的图像尺寸...其他解决方案仅适用于宽度，并且不在乎可用的高度，但是有时您也希望将内容适合一定高度。

我尝试将它们搭接在一起以携带一个完全便携式和可重新设定的解决方案...诀窍是用于自动缩放图像，而是使用Inline SVG元素，而不是使用预渲染的图像或任何形式的第二个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

Answer 17

如果要在肖像或景观视图上安装一个正方形（尽可能大，但没有粘在外面），请在使用 vw / vh 之间切换在方向上肖像/<代码>景观：

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

Answer 18

您可以使用SVG实现这一目标。

这取决于案例，但在某些情况下确实很有用。例如 - 您可以在不设置固定高度的情况下设置 background -image ，或使用比率 16：9 嵌入YouTube ＆lt; iframe＆gt; 和位置：绝对等。

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

Answer 19

我想分享我的解决方案，其中有一个 img -TAG填充特定纵横比。由于缺乏CMS的支持，我无法使用 background ，我不想使用这样的样式标签： 。）“ /＆gt; < /code>。另外，宽度为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>

Answer 20

可以说，您有2个Divs Outer Div是一个容器，内部可能是您需要保持其比率（IMG或YouTube Iframe或其他任何元素）

HTML看起来像这样：

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

您需要保持比率保持比率“元素”
比率=＆gt; 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 */
}

填充时，当指定％时，它是根据宽度而不是高度计算的。
..
因此，基本上，您的宽度IT高度始终是根据该宽度的。这将保持比率。

Answer 21

使用帆布元素维持长宽比的一种简单方法。

尝试调整下面的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>

Answer 22

只是一个想法或骇客。

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 23

新的Chrome 88中的新事物，即将在其他浏览器中遵循新的CSS faction-ratio 属性。

Axch-Ratio CSS属性设置了盒子的首选纵横比，该比例将用于计算自动尺寸和其他一些布局功能。

css技巧

a href =“ https://css-tricks.com/almanac/properties/a/aspect-ratio/” rel =“ nofollow noreferrer“> 更多信息

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

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

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

Answer 24

CSS为此拥有一个新属性： expact-Ratio 。

https：// https://developer.mozilla.orgg/en.org/en en -us/docs/web/css/faction-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>

自V88以来，Chrome and Edge一直在完全支持这一点，Firefox自V81（set layout.css.spect-ratio.enabled.enabled to to 以来一直支持后面的 > true in aid：config ）。

有关兼容性信息，请检查 https://caniuse.com/mdn-css_properties_aspect-ratio

Answer 25

新的Faction-Ratio标签将很棒，但它弄乱了我的Divs的位置。
填充包装师Div的传统解决方案可以根据父或视口的宽度来调整大小，当高度是限制因子时，这会使它有问题。

我发现 min（）函数非常有用，并调整了这样的传统方法：

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>

Answer 26

说您想保持宽度：100px和高度：50px（即2：1）
只是做这个数学：

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

Answer 27

我刚刚创建了一个2：1的div，该div大小以占据全宽度，但是如果它会导致顶部或底部超过，则缩小宽度。但是请注意，这仅适用于窗口的大小，而不仅仅是父母的大小。

#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 的正确％。

Answer 28

  div {
    --width: 16;
    --height: 9;
    aspect-ratio: var(--width) / var(--height);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: deeppink;
    color: dodgerblue;
    font: 6rem monospace;
  }

<div>16∶9</div>

https://developer.mozilla.orgla.org/en-en-us/ DOCS/WEB/CSS/FECTACT-RATIO

Answer 29

我使用了一个新解决方案。

.squares{
  width: 30vw
  height: 30vw

但是，至关重要的是

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

，这是相对于整个视口的。因此，如果您需要一个视口宽度的30％的DIV，则可以使用30VW，并且由于知道宽度，因此您使用Calc和VW单元将其重复使用。

Answer 30

这是我的解决方案，可在具有可选固定边缘的DIV上维持肖像或景观的16：9纵横比。

它是宽度/高度和最大宽度/最大高度属性与大众单元的组合。

在此样本中，悬停在该样本中添加了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>