[Skip to main content](#vessel-content) # resizing thumbnails carousel ## - **[Udo](/forum/user/29928-udo "View Udo's Profile")** - [![Udo's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/29928-udo "View Udo's Profile") Topic Author - [ Offline](/forum/user/29928-udo) Less More - Posts: 220 - Thank you received: 8 - - - 7 years 3 months ago - 7 years 3 months ago [\#308490](#308490) by [Udo](/forum/user/29928-udo "View Udo's Profile") *[resizing thumbnails carousel](/forum/43-carousel-slider/897841-resizing-thumbnails-carousel#308490 "-- 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")* was created by *[Udo](/forum/user/29928-udo "View Udo's Profile")* -- 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 Last edit: 7 years 3 months ago by [Udo](/forum/user/29928-udo "View Udo's Profile"). Reason: Correcting typing error Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL2Nhcm91c2VsLXNsaWRlci84OTc4NDEtcmVzaXppbmctdGh1bWJuYWlscy1jYXJvdXNlbD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86289 - Thank you received: 14265 - - 7 years 3 months ago [\#308491](#308491) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[resizing thumbnails carousel](/forum/43-carousel-slider/897841-resizing-thumbnails-carousel#308491 "-- 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, I'm not following everything you wrote. However, If you just set the height to 115px and leave the width empty in your module, then all the images of the module will have a height of 115px and the width will vary in order to keep the ratio of the image. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL2Nhcm91c2VsLXNsaWRlci84OTc4NDEtcmVzaXppbmctdGh1bWJuYWlscy1jYXJvdXNlbD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Udo](/forum/user/29928-udo "View Udo's Profile")** - [![Udo's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/29928-udo "View Udo's Profile") Topic Author - [ Offline](/forum/user/29928-udo) Less More - Posts: 220 - Thank you received: 8 - - - 7 years 3 months ago [\#308587](#308587) by [Udo](/forum/user/29928-udo "View Udo's Profile") Replied by *[Udo](/forum/user/29928-udo "View Udo's Profile")* on topic *[resizing thumbnails carousel](/forum/43-carousel-slider/897841-resizing-thumbnails-carousel#308587 "-- 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) [ ![udo-pictureA_2019-07-12.jpg](/forum/attachment/47230) ](/forum/attachment/47230 "...2019-07-12.jpg") In picture A all thumbs are loaded in map **upload/thumbnails/114x82** The *bracelet thumb* has size 114x81 (scaled to 115x82) The *golden healer thumb* has size 78x82 [ ![udo-pictureB_2019-07-12.jpg](/forum/attachment/47231) ](/forum/attachment/47231 "...2019-07-12.jpg") In picture B all thumbs are loaded in map **upload/thumbnails/115x119** The *bracelet thumb* has size 114x82 (scaled to 165x119) The *golden healer thumb* has size 114x119 The width in the name of the thumbnail map seems to override the height set in the module. I hope this explanation is clearer than in the former post. Regards, Udo - [ ![udo-pictureA_2019-07-12.jpg](/forum/attachment/47230) ](/forum/attachment/47230 "...2019-07-12.jpg") [ ](/forum/attachment/47230?download=1 "...2019-07-12.jpg") - [ ![udo-pictureB_2019-07-12.jpg](/forum/attachment/47231) ](/forum/attachment/47231 "...2019-07-12.jpg") [ ](/forum/attachment/47231?download=1 "...2019-07-12.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL2Nhcm91c2VsLXNsaWRlci84OTc4NDEtcmVzaXppbmctdGh1bWJuYWlscy1jYXJvdXNlbD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Philip](/forum/user/34318-philip "View Philip's Profile")** - [![Philip's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar34318_2015-11-18-2.png)](/forum/user/34318-philip "View Philip's Profile") - [ Offline](/forum/user/34318-philip) Less More - Posts: 4820 - Thank you received: 654 - - 7 years 3 months ago - 7 years 3 months ago [\#308691](#308691) by [Philip](/forum/user/34318-philip "View Philip's Profile") Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[resizing thumbnails carousel](/forum/43-carousel-slider/897841-resizing-thumbnails-carousel#308691 "-- 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")* Hello, Can you provide more elements to better understand the context as : - Your carousel configuration page **screenshot** - **Front end url** to see results and process some tests by ourselves. Can you try to switch for a **default template** like Protostar to see if that solve your issue or improve the result. Awaiting news from you. Regards Last edit: 7 years 3 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL2Nhcm91c2VsLXNsaWRlci84OTc4NDEtcmVzaXppbmctdGh1bWJuYWlscy1jYXJvdXNlbD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Udo](/forum/user/29928-udo "View Udo's Profile")** - [![Udo's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/29928-udo "View Udo's Profile") Topic Author - [ Offline](/forum/user/29928-udo) Less More - Posts: 220 - Thank you received: 8 - - - 7 years 3 months ago [\#308723](#308723) by [Udo](/forum/user/29928-udo "View Udo's Profile") Replied by *[Udo](/forum/user/29928-udo "View Udo's Profile")* on topic *[resizing thumbnails carousel](/forum/43-carousel-slider/897841-resizing-thumbnails-carousel#308723 "-- 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, 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](https://www.semoea.nl/webwinkel) 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 - [ ![udo-carousel-configuration.jpg](/forum/attachment/47260) ](/forum/attachment/47260 "...figuration.jpg") [ ](/forum/attachment/47260?download=1 "...figuration.jpg") - [ ![udo-carousel-withoutextracss.jpg](/forum/attachment/47261) ](/forum/attachment/47261 "...utextracss.jpg") [ ](/forum/attachment/47261?download=1 "...utextracss.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL2Nhcm91c2VsLXNsaWRlci84OTc4NDEtcmVzaXppbmctdGh1bWJuYWlscy1jYXJvdXNlbD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Philip](/forum/user/34318-philip "View Philip's Profile")** - [![Philip's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar34318_2015-11-18-2.png)](/forum/user/34318-philip "View Philip's Profile") - [ Offline](/forum/user/34318-philip) Less More - Posts: 4820 - Thank you received: 654 - - 7 years 3 months ago - 7 years 3 months ago [\#308746](#308746) by [Philip](/forum/user/34318-philip "View Philip's Profile") Replied by *[Philip](/forum/user/34318-philip "View Philip's Profile")* on topic *[resizing thumbnails carousel](/forum/43-carousel-slider/897841-resizing-thumbnails-carousel#308746 "-- 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")* Hello, I think I get the root issue, see my screenshot : [ ![[img](https://i.imgur.com/vEu4fXV.png) ](https://i.imgur.com/vEu4fXV.png "[img") It seems that you have a plugin jchoptimize that add some extra Css, here "*width:100%;*" So, to solve this **2** solutions : - You can remove this code from the plugin css **Or** - Like on my screenshot, instead of : *max-width: 115px; max-height: 115px;* You use : ***width: auto;*** Hope this will fit your needs. Regards Last edit: 7 years 3 months ago by [Philip](/forum/user/34318-philip "View Philip's Profile"). The following user(s) said Thank You: [Udo](/forum/user/29928-udo "View Udo's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL2Nhcm91c2VsLXNsaWRlci84OTc4NDEtcmVzaXppbmctdGh1bWJuYWlscy1jYXJvdXNlbD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Udo](/forum/user/29928-udo "View Udo's Profile")** - [![Udo's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/29928-udo "View Udo's Profile") Topic Author - [ Offline](/forum/user/29928-udo) Less More - Posts: 220 - Thank you received: 8 - - - 7 years 3 months ago [\#308778](#308778) by [Udo](/forum/user/29928-udo "View Udo's Profile") Replied by *[Udo](/forum/user/29928-udo "View Udo's Profile")* on topic *[resizing thumbnails carousel](/forum/43-carousel-slider/897841-resizing-thumbnails-carousel#308778 "-- 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, 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 Code: .owl-carousel .owl-item img {width:auto} to my template CSS and that overrides this Hikashop CSS. And I deleted my extra CSS line containing max-width:115px and max-height: 115px Now the main problem is solved, hurray. Another problem was the variable size of the carousel thumbs. This size depended on the width-height ratio of the first image (as shown in the pictures in my second post). That ratio determines which map *upload/thumbnails/xxx* is used. And all thumbs in the carousel use that same map. I now discovered that this was caused by setting the height in the carousel module. When the width and height fields in the carousel module are left empty this doesnot happen. Then always map *uploads/thumbnails/120x120* is used. These are the thumbnail dimensions set in the main configuration. I'm very glad the carousel is now working fine. Thanks for your help. Regards, Udo The following user(s) said Thank You: [Philip](/forum/user/34318-philip "View Philip's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL2Nhcm91c2VsLXNsaWRlci84OTc4NDEtcmVzaXppbmctdGh1bWJuYWlscy1jYXJvdXNlbD90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.326 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)