Advertisement
Google Ad Slot: content-top
Bootstrap 5 Aspect Ratio
Bootstrap 5 introduced Aspect Ratio utilities to maintain consistent proportions for elements like images, videos, or containers.
Syntax:
ratio-{type}
ratio: Indicates display.type: Defines the ratio type (e.g.,1x1: 1:1,4x3: 4:3,16x9: 16:9,21x9: 21:9).
Class |
Description |
|---|---|
ratio-1x1 |
Square (1:1 aspect) |
ratio-4x3 |
Standard (4:3 aspect) |
ratio-16x9 |
Widescreen (16:9) |
ratio-21x9 |
Ultra-wide (21:9) |
Aspect ration 1:1
Aspect ration 4:3
Aspect ration 16:9
Aspect ration 21:9
Example
<div class="ratio ratio-4x3">
<img src="/images/whereisstuff/assets/150.png" alt="Placeholder Image" class="img-fluid">
</div>