<div class="aspectratio" style="--aspect-ratio: 4 / 3">
<div class="content">Aspect Ratio
<br />
4:3
</div>
</div>
<div class="aspectratio" style="--aspect-ratio: 3 / 2">
<div class="content">Aspect Ratio
<br />
3:2
</div>
</div>
<div class="aspectratio" style="--aspect-ratio: 16 / 9">
<div class="content">Aspect Ratio
<br />
16:9
</div>
</div>
<div class="aspectratio" style="--aspect-ratio: 1.85 / 1">
<div class="content">Aspect Ratio
<br />
1.85:1
</div>
</div>
<div class="aspectratio" style="--aspect-ratio: 2.39 / 1">
<div class="content">Aspect Ratio
<br />
2.39:1
</div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: #222;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
gap: 10px;
}
.aspectratio {
width: 30vmin;
background-color: #09f;
border: 1px solid #64f;
display: flex;
justify-content: center;
align-items: center;
animation: change 15s linear alternate infinite;
position: relative;
font-size: 1.2rem;
}
.aspectratio::after {
content: "";
width: 1px;
padding-bottom: calc(100% / (var(--aspect-ratio)));
margin: -1px;
z-index: -1;
}
@keyframes change {
0% {
width: 30vmin;
}
100% {
width: 60vmin;
}
}
.content {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
line-height: 1.5;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 2;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.