RIFT container queries
This module enables responsive images in Drupal that adapt to the size of their containing element, rather than just the viewport. It uses modern CSS container queries for a more context-aware and modular approach, ideal for component-based design systems. This allows images to fluidly adjust within grids, cards, or other layout regions without requiring custom JavaScript.
RIFT container queries (rift_cq)
RIFT container queries brings the power of modern CSS container queries to responsive images in Drupal.
This lightweight module allows site builders and themers to define image styles that respond to the size of their container — not just the viewport. It is especially useful in component-based design systems where images must adapt fluidly within cards, grids, or flexible layout regions.
Unlike traditional responsive image techniques that rely solely on media queries and viewport breakpoints, rift_cq utilizes container queries for a more context-aware, modular approach.
Key Features
- Define and apply responsive images based on the size of their container
- Seamlessly integrates with the RIFT module
- Leverages CSS
@containerrules without custom JavaScript - Ideal for Layout Builder and design systems that embrace component-based theming
Dependencies & Status
This module is an extension of the RIFT module and relies on its underlying functionality.
Specifically, rift_cq depends on enhancements introduced in the following RIFT issue:
🔗 https://www.drupal.org/project/rift/issues/3533700
Please ensure that the patch or fix from that issue is applied until it is merged into the RIFT module.