Register

Ratio

Boxes that keep their shape at every width

Ratios

1:1, 4:3, 16:9 and 21:9.

1:1
4:3
16:9
21:9
Show the code
<div class="ratio ratio-1x1" style="width: 160px">
<div class="grid-box" style="display:grid; place-items:center">1:1</div>
</div>
<div class="ratio ratio-4x3" style="width: 160px">
<div class="grid-box" style="display:grid; place-items:center">4:3</div>
</div>
<div class="ratio ratio-16x9" style="width: 160px">
<div class="grid-box" style="display:grid; place-items:center">16:9</div>
</div>
<div class="ratio ratio-21x9" style="width: 160px">
<div class="grid-box" style="display:grid; place-items:center">21:9</div>
</div>

A photo in a ratio

The photo fills a 4:3 box, its own shape.

A cappuccino with latte art
Show the code
<div class="ratio ratio-4x3" style="width: 280px">
<img src="assets/demo/products/cappuccino.jpg" alt="A cappuccino with latte art" width="1200" height="900" style="object-fit: cover">
</div>