3D carousel image aspect ratio disrupted

Hello,

The 3D Carousel operates with a fixed height. To create a 3D carousel with images, you should first define an image style with the desired width and height and apply it to each carousel item. However, since images may vary slightly in dimensions (e.g., a difference of 50 pixels or more), I have enforced a 100% height to ensure the carousel maintains a clean and uniform appearance.

.pb__caro-item .paragraph--type--image-bundle div,
.pb__caro-item .paragraph--type--image-bundle img,
.pb__caro-item .paragraph--type--image-wide-bundle div,
.pb__caro-item .paragraph--type--image-wide-bundle img,
.pb__caro-item .paragraph--type--image-narrow-bundle div,
.pb__caro-item .paragraph--type--image-narrow-bundle img,
.pb__caro-item .paragraph--type--node-reference-bundle img {
  height: 100%;
}

.pb__caro-item article,
.pb__caro-item article .field,
.pb__caro-item .pb__content-full,
.pb__caro-item .field--name-pb-image-field img {
  width: 100%;
  height: 100%;
}

I recommend selecting and resizing images so that they have a consistent aspect ratio before applying an image style that fits and crops them accordingly. This approach ensures a polished final result. In all demo templates I’ve created, I carefully selected images with similar aspect ratios to maintain a cohesive look within each carousel.

Best wishes,
Alaa

Hi Alaa,
I did select images with a consistent aspect ratio. They are all 800x360px and have been used in a slideshow in a D7 site where the size was 830x360. I used Gimp to convert them to 800x360.
They are not resized or cropped in the website. In the paragraph I selected the 'Image' image selector. I presume that selector does not change te images.
I don't know why 2 of them don't respect their sizes when using height: 100%.

Hello,

Once you've selected the images, I'll create an image style and apply it to ensure they all have the same height. I typically use an image style as a safeguard in case any images don’t display correctly.

Best wishes,
Alaa

Automatically closed - issue fixed for 2 weeks with no activity.