有几种方法可以在元素(如div)上指定固定的纵横比，下面是其中的两种:

1. 纵横比CSS属性

div { 纵横比:1 / 1; 宽度:50%; 背景:蓝绿色; ｝ <div>纵横比:1 / 1

这是最简单灵活的解决方案。它直接为元素指定固定的宽高比(或高宽比)。这意味着您还可以根据元素的高度指定纵横比。 它不依赖于父宽度(像填充技术)或视口大小(像下面的vw单元技术)，它依赖于元素自身的宽度或高度。这就是为什么与其他变通方法相比，它是如此强大。

这是一个现代化的房产(2021年)。所有现代浏览器都支持它，请参阅caniuse以获得精确的浏览器支持。

下面是一些不同纵横比的例子:

.ar-1-1{纵横比:1 / 1;} .ar-3-2{纵横比:3 / 2;} .ar-4-3{纵横比:4 / 3;} .ar-16-9{纵横比:16 / 9;} .ar-2-3{纵横比:2 / 3;} .ar-3-4{纵横比:3 / 4;} .ar-9-16{纵横比:9 / 16;} /**对于演示:**/ 身体{ 显示:flex; flex-wrap:包装; 对齐项目:flex-start; ｝ div { 背景:蓝绿色; 宽度:23%; 利润率:1%; 填充:20 px 0; box-sizing: border-box; 颜色:# fff; text-align:中心; ｝ <div class="ar-1-1">纵横比:1 / 1 <div class="ar-3-2">纵横比:3 / 2 <div class="ar-4-3">纵横比:4 / 3 <div class="ar-16-9">纵横比:16 / 9 <div class="ar-2-3">纵横比:2 / 3 <div class="ar-3-4">纵横比:3 / 4 <div class="ar-9-16">纵横比:9 / 16

2. 使用大众单位:

你可以用vw单位来表示元素的宽度和高度。这允许根据视口宽度保留元素的纵横比。

Vw:视口宽度的百分之一。(MDN)

或者，你也可以使用vh作为视口高度，或者甚至使用vmin/vmax来使用视口尺寸中的较大/较小(此处讨论)。

例如:1:1的纵横比 div { 宽度:20大众; 高度:20大众; 背景:黄金; ｝ < div > < / div >

对于其他纵横比，您可以使用下表根据元素的宽度计算高度的值:

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

示例:正方形div的4x4网格

身体{ 显示:flex; flex-wrap:包装; justify-content:之间的空间; ｝ div { 宽度:23大众; 高度:23大众; 利润率:0.5大众汽车; 背景:黄金; ｝ < 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 >

这里是一个摆弄这个演示，这里是一个解决方案，使一个响应网格的正方形与垂直和水平居中的内容。

浏览器对vh/vw单元的支持是IE9+，参见canIuse了解更多信息

艾略特启发我想出了这个解决方案——谢谢:

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特性，可能不适用于你的目标浏览器。你可以检查互操作性(f.e.在caniuse.com)。

有几种方法可以在元素(如div)上指定固定的纵横比，下面是其中的两种:

1. 纵横比CSS属性

div { 纵横比:1 / 1; 宽度:50%; 背景:蓝绿色; ｝ <div>纵横比:1 / 1

这是最简单灵活的解决方案。它直接为元素指定固定的宽高比(或高宽比)。这意味着您还可以根据元素的高度指定纵横比。 它不依赖于父宽度(像填充技术)或视口大小(像下面的vw单元技术)，它依赖于元素自身的宽度或高度。这就是为什么与其他变通方法相比，它是如此强大。

这是一个现代化的房产(2021年)。所有现代浏览器都支持它，请参阅caniuse以获得精确的浏览器支持。

下面是一些不同纵横比的例子:

.ar-1-1{纵横比:1 / 1;} .ar-3-2{纵横比:3 / 2;} .ar-4-3{纵横比:4 / 3;} .ar-16-9{纵横比:16 / 9;} .ar-2-3{纵横比:2 / 3;} .ar-3-4{纵横比:3 / 4;} .ar-9-16{纵横比:9 / 16;} /**对于演示:**/ 身体{ 显示:flex; flex-wrap:包装; 对齐项目:flex-start; ｝ div { 背景:蓝绿色; 宽度:23%; 利润率:1%; 填充:20 px 0; box-sizing: border-box; 颜色:# fff; text-align:中心; ｝ <div class="ar-1-1">纵横比:1 / 1 <div class="ar-3-2">纵横比:3 / 2 <div class="ar-4-3">纵横比:4 / 3 <div class="ar-16-9">纵横比:16 / 9 <div class="ar-2-3">纵横比:2 / 3 <div class="ar-3-4">纵横比:3 / 4 <div class="ar-9-16">纵横比:9 / 16

2. 使用大众单位:

你可以用vw单位来表示元素的宽度和高度。这允许根据视口宽度保留元素的纵横比。

Vw:视口宽度的百分之一。(MDN)

或者，你也可以使用vh作为视口高度，或者甚至使用vmin/vmax来使用视口尺寸中的较大/较小(此处讨论)。

例如:1:1的纵横比 div { 宽度:20大众; 高度:20大众; 背景:黄金; ｝ < div > < / div >

对于其他纵横比，您可以使用下表根据元素的宽度计算高度的值:

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

示例:正方形div的4x4网格

身体{ 显示:flex; flex-wrap:包装; justify-content:之间的空间; ｝ div { 宽度:23大众; 高度:23大众; 利润率:0.5大众汽车; 背景:黄金; ｝ < 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 >

这里是一个摆弄这个演示，这里是一个解决方案，使一个响应网格的正方形与垂直和水平居中的内容。

浏览器对vh/vw单元的支持是IE9+，参见canIuse了解更多信息

2021年更新- CSS纵横比属性

我们最近获得了在CSS中使用长宽比属性的能力。

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

注意:支持还不是最好的…

注意:支持是相当体面的!

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

编辑:长宽比现在可用!

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

如果你对如何使用它感兴趣，可以看看下面这个超级简单的例子

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

保持纵横比的一个简单方法，使用canvas元素。

尝试调整下面的div的大小，看看它的作用。

对我来说，这种方法效果最好，所以我把它分享给其他人，这样他们也能从中受益。

.cont { 边框:5px纯蓝色; 位置:相对; 宽度:300 px; 填充:0; 保证金:5 px; 调整:水平; 溢出:隐藏; ｝ .ratio { 宽度:100%; 保证金:0; 显示:块; ｝ .content { Background-color: rgba(255, 0,0, 0.5); 位置:绝对的; 上图:0; 左:0; 宽度:100%; 高度:100%; 保证金:0; ｝ < div class = "跟" > <canvas class="ratio" width="16" height="9"></canvas> <div class="content">我是16:9</div> < / div >

也适用于动态高度!

.cont { 边框:5px纯蓝色; 位置:相对; 身高:170 px; 填充:0; 保证金:5 px; 调整:垂直; 溢出:隐藏; 显示:inline-block;/*所以div不会自动扩展到最大宽度*/ ｝ .ratio { 高度:100%; 保证金:0; 显示:块; ｝ .content { Background-color: rgba(255, 0,0, 0.5); 位置:绝对的; 上图:0; 左:0; 宽度:100%; 高度:100%; 保证金:0; ｝ < div class = "跟" > <canvas class="ratio" width="16" height="9"></canvas> <div class="content">我是16:9</div> < / div >

为了补充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媒体查询来根据设备分辨率提供不同的logo文件，但仍然按照<img>自然会做的比例缩放(我将logo作为背景图像设置为具有正确纵横比的透明。png)。但是Web_Designer的解决方案将为我节省一个http请求。