This module enables responsive images to adapt based on CSS container queries, extending Drupal's existing Responsive Image functionality. It allows you to define breakpoints that respond to the size of their containing element, rather than the viewport.
A Drupal module that extends Responsive Image to support CSS container queries.
How It Works
1. Create breakpoints with "container" in the group name
MYTHEME.container.sm:
label: 'Container SM (240px)'
mediaQuery: 'all and (min-width: 240px)'
weight: 1
group: MYTHEME.container
multipliers:
- 1x
2. Use these breakpoints in a Responsive Image Style
3. The module automatically detects and enables container query mode
How to use
1. Go to `/admin/config/media/responsive-image-style`
2. Create a style, select "container query images" as the breakpoint group
3. Map your image styles
4. Use the standard Responsive Image formatter
Ask your assistant about Container Query Images
Check compatibility with your Drupal and PHP version, maintenance and security coverage, from current release data. How it works
Depends on
Dependencies of the latest stable release
- breakpoint Drupal core
- image Drupal core
- responsive_image Drupal core
Required by
Tracked projects that depend on this one
No tracked projects depend on this one yet.