Basic Ratio Aspect ratio is most commonly expressed as two integers and a division sign: width / height. To measure the aspect ratio of an image or video, divide the width by the height. For example, an image or video that is 400x300 pixels and one that is 260x195 pixels have the same ratio 4/3 (standard). Important Notes: Reference the schema for all options. Use in tandem with an image: set a different aspect ratio than the image’s natural aspect ratio. This will crop the image. Do not use the Ratio element if cropping is not needed. When the image’s width is smaller than the parent container, the image will stretch to fill the available space. Use in tandem with a video: the Ratio element preserves the needed space to load a video embed, preventing Cumulative Layout Shift. Additionally, a CSS custom property is available to change the aspect ratio to anything. Define --e-bolt-aspect-ratio inline style rule to set the desired aspect ratio. Demo The ratio prop is set to standard. The aspect ratio is 4/3.
Alt text.
The ratio prop is set to square. The aspect ratio is 1/1.
Alt text.
The ratio prop is set to wide. The aspect ratio is 16/9.
Alt text.
The ratio prop is set with --e-bolt-aspect-ratio via inline CSS style. The aspect ratio is 7/3.
Alt text.
Twig
{% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'Alt text.',
      src: 'https://via.placeholder.com/400x300',
      width: 200,
      height: 200,
    },
  } only %}
{% endset %}
{% include '@bolt-elements-ratio/ratio.twig' with {
  content: image,
  ratio: 'square',
} only %}
HTML
<div class="e-bolt-ratio e-bolt-ratio--square">
  <!-- image or video goes here -->
</div>