Normalize Image Captions in Drupal with a Cleaner CSS Approach

Staff Reporter

Mario Hernandez shares a concise CSS technique to ensure image captions never exceed the width of their images. By using the inline-size: fit-content property on the <figure> element and contain: inline-size on <figcaption>, developers can keep captions aligned with their images regardless of container width. This approach maintains semantic HTML, enhances accessibility, and improves rendering performance.

The method relies on logical CSS properties that are modern, semantic, and easy to implement across projects. Hernandez also recommends optional enhancements like smaller, italicized text and additional padding to improve readability without complicating the layout.

This technique works particularly well in Drupal or any CMS environment where content display consistency matters. It reduces the need for over-engineered layout workarounds and helps teams maintain visual alignment between image assets and their captions. It's a simple, elegant solution that pays off in clarity and efficiency.

Reference: Normalize images captions in your website by Mario Hernandez (6 October 2025)

Accessibility

Performance

Drupal Theming

Disclosure: This content is produced with the assistance of AI.

Disclaimer: The opinions expressed in this story do not necessarily represent that of TheDropTimes. We regularly share third-party blog posts that feature Drupal in good faith. TDT recommends Reader's discretion while consuming such content, as the veracity/authenticity of the story depends on the blogger and their motives.

Note: The vision of this web portal is to help promote news and stories around the Drupal community and promote and celebrate the people and organizations in the community. We strive to create and distribute our content based on these content policy. If you see any omission/variation on this please reach out to us at #thedroptimes channel on Drupal Slack and we will try to address the issue as best we can.