【CSS】aspect-ratio

aspect-ratio

通过 aspect-ratio 属性来设置元素的宽高比。

文档

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;
}

结果

400*240
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容