Jump to content

Carousel equal Height with different aspect ratios

Go to solution Solved by Luca_,

Recommended Posts

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!!

Link to comment

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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution

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
}

 

Screenshot 2024-07-04 alle 10.11.40.png

Screenshot 2024-07-04 alle 10.11.05.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.