aspect-ratio

通過 aspect-ratio 屬性來設(shè)置元素的寬高比。

文檔

https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio

語法

aspect-ratio: <width> / <height>;

示例

HTML

<div class="card card-1-1">1:1</div>
<div class="card card-16-9">16:9</div>

CSS

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
}

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

.card-16-9 {
  aspect-ratio: 16 / 9;
}

結(jié)果

400*240