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