本文主要是介绍CSS aspect-ratio All In One，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

CSS aspect-ratio All In One

<div class="row">
  <div style="--ratio: 4 / 3;" class="item">4:3</div>
  <div style="--ratio: 2 / 3;" class="item">2:3</div>
</div>

.row {
  display: flex;
  gap: 1rem;
}

.item {
  flex-basis: 0;
  aspect-ratio: var(--ratio);
  flex-grow: calc(var(--ratio));
}

<iframe allowfullscreen="true" allowtransparency="true" frameborder="no" height="300" loading="lazy" scrolling="no" src="https://codepen.io/xgqfrms/embed/XWVwObj?default-tab=result&theme-id=dark" style="width: 100%" title="CSS aspect-ratio All In One"> See the Pen CSS aspect-ratio All In One by xgqfrms (@xgqfrms) on CodePen. </iframe>

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载

这篇关于CSS aspect-ratio All In One的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！