Avada Forums Community Forum Image Carousel custom height Reply To: Image Carousel custom height

koppit
Participant
Post count: 3

Had to do some width calculations using css on this. I think the importance of being able to use a ratio and having all images calculated the same was something I had to consider, rather than inputting flex ratios or fixed heights and not having it work responsively.

Basically we are taking the width of the viewport and dividing by 3 (for three columns), then subtracting to account for some margins around the images. The height is achieved using a ratio of 3:2 on that calculation. I used a variable on the carousel item so I could pass it down to the image wrapper. By hiding the overflow on the carousel item, it gives the illusion of all of the images being the same size, and the ones larger in height get cropped to fit.

Hope it helps someone!

.fusion-carousel .fusion-carousel-item {
    display: block;
    float: left;
    padding: 0;
    --width: calc(100vw /3 - 35px)!important;
    width: calc(100vw /3 - 35px)!important;
    height: calc(var(--width) / 3 * 2);
    overflow: hidden;
}

.fusion-carousel .fusion-carousel-item .fusion-carousel-item-wrapper {
    display: block;
    max-height: calc(var(--width) / 3 * 2);
}