<div class="row">
<div style="--ratio: 4 / 3;" class="item">4:3</div>
<div style="--ratio: 2 / 3;" class="item">2:3</div>
</div>
body {
background: #003;
color: #fff;
padding: 2rem;
}
.row {
max-width: 50rem;
border: 1px dashed rgb(255 255 255 / 0.4);
margin-inline: auto;
padding: 0.5rem;
display: flex;
align-items: flex-start;
}
.item {
aspect-ratio: var(--ratio);
background: #f09;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
width: 100%;
}
.item + .item { background: #09f;}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.