resizing thumbnails carousel

-- HikaShop version -- : 3.5.1
-- Joomla version -- : 3.9.5
-- PHP version -- : 7.1.24

Hi.

I've a problem adjusting the height of the thumbnails in the carousel module. It;s quite confusing, I'll try to explain.

In the carousel 4 products are shown in a horizontal row.
In the Hikashop configuration the thumbnails are set to 120px width and 120px height.
Force image size is off.

The fact is that most images aren't square, the proportion width-height varies.

In the website all 4 thumbs in the row have the same width 120px, but the height varies.
For instance: thumb X has width 120px and height 144px.
And thumb Y has width 120px and height 115px
Apparently the setting of the width overrides the height setting.

I prefer to limit the height variety of the thumbs.
So using CSS I set the max-height to 115px.
The result is that thumb X indeed has height 115px.
But the width of the thumb hasnot changed, still it's 120px. So the thumb is distorted.

However: when changing the width via CSS the height is adjusted in the correct proportional way.
When the width is maximized to 115px thumb X has width 115px and height 137px. Proportion is unchanged.

Is there a way to get the same behaviour when maximizing the height?
Maximizing the height to 115px should result in a proportional change of the width to 97px.

I hope this is possible.
Thanks,
Udo

Hi Nicolas,
Thanks for the reply.
I''ve done as you suggested but the result is not good.
The problem seems to be that the first image in the row is decisive for the size of all thumbnails in the carousel.
When the first image changes, than the size of all thumbs change.

To illustrate I've attached 2 pictures of the carousel. On both pictures you see 4 products.
The difference between pictures A an B is that the first two products change position.
As you can see the impact of this change is big.
In the carousel module height is set to 115px, width is empty (like you suggested)

Hi,

I've attached a screenshot of the carousel configuration.

Switching to the Protostar template makes no difference at all.

URL of page containing the carousel module(named Onze nieuwste producten) : Webshop Semoea

Notice that the situation is somewhat different from the screenshots I did send before. That's because new products have been published.

Important: I've applied an extra CSS line to restrict the height of the thumbnails (max-width:115px, max-height:115px)
That's done to prevent an undesirable display.
Have a look at the webpage while this extra CSS line is switched off (see attached file).
See what happens to the product Afrikaanse jade armband (second slide). That's much to high because the ratio is very different from the first thumb of the module. Alas the extra CSS rule causes a distorted width-height ratio.

Hope you can find a solution.

By the way: I'm subscribed to this topic but for some reason I don't receive an email when a new reply is published.

Regards,
Udo

Hi,

Thanks a lot for finding the root issue.

However the plugin JCH Optimize is just combining CSS files into one. It doesnot add extra CSS.
In fact the relevant code is part of the Hikashop file media/com_hikashop/css/owl.carousel.min.css

I've added the line

.owl-carousel .owl-item img {width:auto}