[Skip to main content](#vessel-content) # Secondary product images appear distorted ## - **[Reincidente](/forum/user/12307-reincidente "View Reincidente's Profile")** - [![Reincidente's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/12307-reincidente "View Reincidente's Profile") Topic Author - [ Offline](/forum/user/12307-reincidente) Less More - Posts: 465 - Thank you received: 19 - 2 months 3 weeks ago [\#373061](#373061) by [Reincidente](/forum/user/12307-reincidente "View Reincidente's Profile") *[Secondary product images appear distorted](/forum/26-product-category-display/910758-secondary-product-images-appear-distorted#373061 "Hi Nicolas, We have noticed an issue with the secondary images in the product page gallery. The secondary images are displayed very tall and narrow, which distorts their proportions and makes them difficult to view properly. The main product image is displayed correctly. The issue only affects the secondary images/thumbnails. Do you know what could be causing this?")* was created by *[Reincidente](/forum/user/12307-reincidente "View Reincidente's Profile")* Hi Nicolas, We have noticed an issue with the secondary images in the product page gallery. The secondary images are displayed very tall and narrow, which distorts their proportions and makes them difficult to view properly. The main product image is displayed correctly. The issue only affects the secondary images/thumbnails. Do you know what could be causing this? [ ![second.png](/forum/attachment/63384) ](/forum/attachment/63384 "second.png") - [ ![second.png](/forum/attachment/63384) ](/forum/attachment/63384 "second.png") [ ](/forum/attachment/63384?download=1 "second.png") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA3NTgtc2Vjb25kYXJ5LXByb2R1Y3QtaW1hZ2VzLWFwcGVhci1kaXN0b3J0ZWQ/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) 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?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86324 - Thank you received: 14285 - - 2 months 3 weeks ago [\#373067](#373067) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Secondary product images appear distorted](/forum/26-product-category-display/910758-secondary-product-images-appear-distorted#373067 "Hi Nicolas, We have noticed an issue with the secondary images in the product page gallery. The secondary images are displayed very tall and narrow, which distorts their proportions and makes them difficult to view properly. The main product image is displayed correctly. The issue only affects the secondary images/thumbnails. Do you know what could be causing this?")* Hi, That comes from the CSS of your template, not from the thumbnails themselves. HikaShop generates the thumbnails at a fixed size and writes that size on the image tag, like this : Code: <img class="hikashop_child_image" width="100" height="100" src="..."/> If the CSS of your template contains a rule which forces the width of the images, for example img { width: 100% }, without setting the height back to auto, the browser stretches the image to the whole width of the column while it keeps the height written on the tag. The result is exactly what your screenshot shows : thumbnails as wide as the block and completely flattened. The main image is not affected because it sits in a container of its own size. Two ways to confirm it in one minute : - open one of the thumbnails alone in a browser tab (right click on it, open the image in a new tab). If the file itself has the right proportions, then it is the CSS of the page. - right click on a thumbnail and choose Inspect : the rule which sets the width will be shown in the styles panel, with the name of the CSS file it comes from. The fix is to add this in the custom CSS of your template : Code: .hikashop_small_image_div img, .hikashop_small_image_div picture img { width: auto !important; height: auto !important; max-width: 100%; } Note that HikaShop never distorts an image : the two modes available in the configuration for the thumbnails are "keep the ratio" and "crop", so a generated thumbnail always keeps its proportions. If that does not solve it, give me the address of a product page of your website and I will look at it directly. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA3NTgtc2Vjb25kYXJ5LXByb2R1Y3QtaW1hZ2VzLWFwcGVhci1kaXN0b3J0ZWQ/dG1wbD1tYXJrZG93bg==) or [Create an account](/register) 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.079 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)