Aspect Ratio
Classes #
Aspect-ratio utility classes:
| CSS Class | Description |
|---|---|
a{p}spect-ratio-16:9 |
aspect-ratio: 16:9 |
a{p}spect-ratio-3:2 |
aspect-ratio: 3:2 |
a{p}spect-ratio-4:3 |
aspect-ratio: 4:3 |
a{p}spect-ratio-5:4 |
aspect-ratio: 5:4 |
a{p}spect-ratio-1:1 |
aspect-ratio: 1:1 |
a{p}spect-ratio-4:5 |
aspect-ratio: 4:5 |
a{p}spect-ratio-3:4 |
aspect-ratio: 3:4 |
a{p}spect-ratio-2:3 |
aspect-ratio: 2:3 |
a{p}spect-ratio-9:16 |
aspect-ratio: 9:16 |
To add/remove aspect-ratio utility classes, in your style.scss pass the $aspect-ratio array to the config module:
@use 'config' as * with (
$aspect-ratio: (16 9, 3 2, 4 3, 5 4, 1 1, 4 5, 3 4, 2 3, 9 16)
);Media wrapper #
The .media-wrapper-{ratio} classes use the padding hack to set the aspect ratio of the element they're applied to.
| CSS Class | Description |
|---|---|
m{p}edia-wrapper-16:9 |
set the child aspect-ratio equal to 16:9 |
m{p}edia-wrapper-3:2 |
set the child aspect-ratio equal to 3:2 |
m{p}edia-wrapper-4:3 |
set the child aspect-ratio equal to 4:3 |
m{p}edia-wrapper-1:1 |
set the child aspect-ratio equal to 1:1 |
If you want to apply a specific aspect ratio to an image, a video, or an iframe, you should apply the .media-wrapper-{ratio} class to their parent:
<figure class="media-wrapper-4:3">
<img src="image.jpg" alt="Image description">
</figure>
