Aspect box
An aspect box crops images to a particular aspect ratio.
HTML
<div class="ds_aspect-box ds_aspect-box--square">
<img alt="Thistle flowers in a field" class="ds_aspect-box__inner">
</img></div>About this component
Aspect box is a component used to constrain an image to a particular aspect ratio. It will crop the image if necessary. It supports common aspect ratios of:
- 1:1 (square)
- 4:3 (standard fullscreen)
- 16:9 (standard widescreen)
- 21:9 (anamorphic widescreen)
Why we use this component
When it's not possible to use exactly-sized images, the aspect box component helps with art direction and maintaining a uniform appearance. For example, in a grid of image cards where differently-sized images would make the page appear jumbled.
Related components
Implementation
Aspect boxes use an aspect ratio of 16:9 (standard widescreen) by default. To specify a different aspect ratio, there are 3 modifier classes you can use.
| Aspect ratio | Modifier class |
|---|---|
| 1:1 | ds_aspect-box--square |
| 4:3 | ds_aspect-box--43 |
| 21:9 | ds_aspect-box--219 |