Define maximum height for product images

[LuiPru]

Hi guys,

I'd like to define a maximum height to my product images, so that too large images do not mess up my product page.

In theory, it should work with the following custom CSS for the product page, as it also works perfectly fine in the editor/preview. But when saving it, it throws the error: "Session in the online store editor cannot be published" (Or similar, as my language setting is German, there is says: "Sitzung im Onlineshop-Editor kann nicht veröffentlicht werden".)

.product-image-main {
  img {
    height: 600px;
    object-fit: contain;
  }
}

I would like to avoid situation like this (image has only 600px height, I don't know why it gets so big):

Help is very much appreciated ❤️ 

[suyash1 · Accepted solution]

@LuiPru  can you please share this page link? try following css as well

.product-image-main img {height: 600px;    object-fit: contain;}

[LuiPru]

Yes sure, the link is: https://www.cdc-reitsport.com/products/cxevalo-hufpuder-fur-pferde

Will try out your suggestion in a few seconds!

Edit: @suyash1 Many many thanks! It worked 👏 😍 Did not think that it would be that easy. Lovely, thanks a lot!

[suyash1]

@LuiPru - welcome, happy to help.

[LuiPru]

Just to test out one more thing, I removed the styling once again. Do you maybe also have an idea why it tries to scale my image in such a weird way? If you compare it with other products, it does not happen everywhere, only on this product 🤔 

[suyash1]

@LuiPru - it is showing that original image size is very less with 148x600 which is rendered to 600px x 2143px , hence it is blurred

[LuiPru]

Do you have any idea why it gets rendered to that big version? Usually it shows all my images in the actual size, that's why I am confused what's happening here... E.g. if you compare with different products like https://www.cdc-reitsport.com/products/carubina-damen-vollbesatzreithose-calorena

Both use the design for a standard product.

[suyash1]

@LuiPru  it is happening through javascript hence difficult to adjust or control, you will need help from someone who is javascript expert

[LuiPru]

Thank you so much! I will check if I can finde someone 🙂 

[DaisyVo]

Hi @LuiPru 

You can add the code in the head liquid instead, please follow these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head>

Don't forget to add the {% style %} at the beginning of the code and {% endstyle %} at the end of the code

I hope this helps

Best,

Daisy

[LuiPru]

Thank you @DaisyVo as well! As the suggestion from the user above worked, I did't not even test your suggestion (although because I am pretty afraid of touching the code directly 😅). Nevertheless, thank you for your help 👏