有几种方法可以在元素(如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了解更多信息

正如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上演示

我是这样做的:

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

源

根据你的解决方案，我做了一些技巧:

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

jQuery和jQuery

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

有了这个，你只需要设置attr data-keep-ratio到高/宽，就这样。

我想分享我的解决方案，其中我有一个img-tag填充一定的纵横比。我不能使用背景，因为缺乏对CMS的支持，我不喜欢使用这样的样式标签:<img style="background:url(…)"/ >。此外，宽度为100%，因此不需要像某些解决方案那样设置为固定大小。它将响应伸缩!

.wrapper { 宽度:50%; ｝ .image-container { 位置:相对; 宽度:100%; ｝ {前.image-container:: 内容:“”; 显示:块; ｝ .image-container img { 位置:绝对的; 上图:0; 左:0; 宽度:100%; 高度:100%; object-fit:封面; ｝ {前.ratio-4-3:: padding-top: 75%; ｝ {前.ratio-3-1:: 填充顶:calc(100% / 3); ｝ {前.ratio-2-1:: padding-top: 50%; ｝ <div class="wrapper"> <!——让事情变得小一点——> < p > 一个4:3宽高比的例子，由一个1:1比例的图像填充。 < / p > <div class="image-container ratio-4-3"> <!——让我们用4:3的长宽比——> <img src="https://placekitten.com/1000/1000/" alt="小猫!"/> < / div > < p > 只需在它周围放置其他块元素;它会工作得很好。 < / p > < / div >

有几种方法可以在元素(如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了解更多信息