前端如何保持元素的宽高比？-JXin的博客

aspect-ratio
padding

最近在项目中遇到需要保持页面中元素宽高比的需求，元素宽度会随着外容器的宽度改变，而高度也要随着一定比例跟着变化，这里记录一下找到的两种方法

aspect-ratio

首先是使用CSS的属性 aspect-ratio 来实现

aspect-ratio属性

aspect-ratio 属性只需要传入需要的宽高比即可，例如宽高比为4:3：

/* 宽 / 高 */
aspect-ratio: 4 / 3;

1
2

现在来看一个例子，例如：有一个元素宽度为容器的百分50，在容器宽度改变时，如何让高度按宽高比4/3的比例跟着改变？

aspect-ratio

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .wrap {
      width: 50%;
      height: 100px;
      background-color: red;
      margin: 100px auto;
    }
  </style>
  <body>
    <div class="wrap"></div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

现在我们不写元素的高度，直接使用 aspect-ratio

.wrap {
	width: 50%;
	/* height: 100px; */
	aspect-ratio: 4 / 3;
	background-color: red;
	margin: 100px auto;
}

1
2
3
4
5
6
7

aspect-ratio

可以看到图片的高度已经按4/3的比例随宽度变化

兼容性

aspect-ratio 虽然好用，但是却有兼容性问题，下图中可以看到chrome也要在2021年后的版本才能使用，而IE根本用不了，所以这个属性还是需要慎重使用
aspect-ratio兼容性

padding

在考虑兼容性的前提下，还有另一种方式，稍微要绕个弯，就是使用 padding 来实现，利用的是 padding 可以写百分比的特性，我们改一下代码：

在元素内再写一个子元素，然后将元素的 padding 设置为75%，这个75%是基于父元素的，所以父元素就会被子元素撑开，这样也能实现同样的效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .wrap {
      width: 50%;
      background-color: red;
      margin: 100px 100px;
    }
    .inner {
      width: 100%;
      padding-top: 75%;
    }
  </style>
  <body>
    <div class="wrap">
      <div class="inner"></div>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24