Carousel images stretched out and cut off.

Created on 19 June 2025, 13 days ago

Problem/Motivation

Images within a carousel, created by the "Paragraphs Bundles" module and the Solo theme, are being stretched to fit the width/height of the carousel item. That leads to images which are larger than the carousel item even though the original image has a size of 300px by 150px and the carousel's slide width is set to larger (e.g. 500px) or smaller than the
image.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

πŸ’¬ Support request
Status

Active

Version

1.0

Component

Documentation

Created by

πŸ‡¦πŸ‡ΉAustria maxilein

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @maxilein
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    Hello,

    In the Solo theme, clickable images are set to stretch to 100% width by default. To disable this behavior, add the class image-auto to the Custom CSS Classes field under Page Wrapper in your sub-theme or Solo theme settings, as shown in the screenshot.

    Best wishes,
    Alaa

  • πŸ‡¦πŸ‡ΉAustria maxilein

    Thank you!

  • πŸ‡¦πŸ‡ΉAustria maxilein

    I could solve it by playing around with image sizes and width settings.
    Can I ask you if it would make a difference to use responsive image styles for the images? Because I could not see any.

  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    Hello,

    Using an image style is definitely better than loading the original image, it helps reduce file size and improves performance.

    Responsive image styles take it a step further. They let you set different image styles per breakpoint, so the browser loads the right size depending on the screen.

    If you're dealing with large images or care about performance (which most of us do), responsive images are the way to go.

    So yes, if you're aiming for the best setup, I’d recommend going with responsive image styles.

    Best wishes,
    Alaa

  • πŸ‡¦πŸ‡ΉAustria maxilein

    Thank you.

  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    You are welcome!

Production build 0.71.5 2024