Carousel equal Height with different aspect ratios

Hi,

I want to build a corousel image gallery but when I upload images with different aspect ratio it keeps the same width and adapt the height. I want the opposite, same height and different width without cropping. I read other post but I had not find any solution. Is there any css code to do this?

page: https://www.f85.it/works/jammingpark

pw: F85website!!

You can use this code to Custom CSS box

section[data-section-id="668275bd2064155d7aff535d"] {
li.user-items-list-carousel__slide.list-item, .user-items-list-carousel__media-inner, .user-items-list-carousel__media-container, .user-items-list-carousel__media {
    height: 100% !important;
}}

Thanks for the reply. That code scale up the height of horizontal images but i want to keep individual aspect ratios. I have attached some pictures to explain.

Ok, I found a workaround. With css I set horizontal images takes 2 columns so the aspect ratios are similar to original images (not the exact same). Just add some text in image alt section, I use "hr". Then, you have to play with columns number to make slide working correctly.

In these example my images are 3:2 and 2:3.

Here the code and image example:

li:has(img[alt~="hr"]) {
    grid-column-start: 1 !important;
    grid-column-end: 3 !important;
}
.user-items-list-carousel__slides li, .user-items-list-carousel__media-container, .user-items-list-carousel__media-inner, .user-items-list-carousel__slides img {
  height:100% !important;
  object-fit:cover;
  border-radius:20px; //use this if you want round corners
}

Thank you for the workaround!
Any ideas on how to fix this issue?

Bump!

On 9/1/2024 at 8:14 AM, aherrasti said:

Thank you for the workaround!
Any ideas on how to fix this issue?

Setup image on carousel options to "Original size". Maybe the text under the images is creating some space.  Try to put "position" on center.

On 7/4/2024 at 10:19 AM, Luca_ said:

Ok, I found a workaround. With css I set horizontal images takes 2 columns so the aspect ratios are similar to original images (not the exact same). Just add some text in image alt section, I use "hr". Then, you have to play with columns number to make slide working correctly.

In these example my images are 3:2 and 2:3.

Here the code and image example:

li:has(img[alt~="hr"]) {
    grid-column-start: 1 !important;
    grid-column-end: 3 !important;
}
.user-items-list-carousel__slides li, .user-items-list-carousel__media-container, .user-items-list-carousel__media-inner, .user-items-list-carousel__slides img {
  height:100% !important;
  object-fit:cover;
  border-radius:20px; //use this if you want round corners
}

 

Another update on this workaround. There is a problem with image resolution, horizontal images are loaded as vertical image resolution so smaller than the visible resolution. I'm working on fixing this without any code injection