Css Aspect Ratio

This module provides a responsive image container with aspect ratio to prevent unexpected cumulative layout shifts of images. The container prevents page shifts caused by asynchronously loaded images. It supports images and also responsive images. Click on the first image to see a short demonstration video.
For further reading how the CSS container works check out: https://css-tricks.com/aspect-ratio-boxes/

Configuration

To use the css image aspect ratio container, you have to activate it in your field format settings. You can also control in the module configuration for which breakpoints the css should be generated.

Browser support

The module uses custom css properties, which are only supported by newer browsers.