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, 禁止转载

标签：flex,ratio,aspect,xgqfrms,var,CSS
来源： https://www.cnblogs.com/xgqfrms/p/16192717.html