css
.div {
height: 0;
padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
}
| Aspect Ratio | Padding-Bottom |
|---|
| 1:1 | 100% |
| 16:9 | 56.25% |
| 4:3 | 75% |
| 3:2 | 66.66% |
| 8:5 | 62.5% |
css
div {
aspect-ratio: 2/3;
}
html
<div class="aspect-[2/3]"></div>