<div class="ratio ratio-1-1"><span>1:1</span></div>
<div class="ratio ratio-4-3"><span>4:3</span></div>
<div class="ratio ratio-3-2"><span>3:2</span></div>
<div class="ratio ratio-16-9"><span>16:9</span></div>
html {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #ffffff;
background-color: #121212;
}
body {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
max-width: 960px;
margin: auto;
& > div {
margin: 1rem;
}
}
.ratio {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 200px;
span {
position: absolute;
}
&::before {
display: block;
content: "";
width: 100%;
background-color: #AD9CFF;
border-radius: 10px;
}
}
/* --- Fun begin here --- */
.ratio-1-1::before {
padding-top: (1 / 1) * 100%;
// Equal padding-top: 100%;
}
.ratio-3-2::before {
padding-top: (2 / 3) * 100%;
// Equal padding-top: 66.66%;
}
.ratio-4-3::before {
padding-top: (3 / 4) * 100%;
// Equal padding-top: 75%;
}
.ratio-16-9::before {
padding-top: (9 / 16) * 100%;
// Equal padding-top: 56.25%;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.