Fix ratio for product image at product page

Store Design
,

Topic summary

A user seeks to enforce a fixed 2:3 aspect ratio for product images on their product page, with resizing based on height rather than width.

Proposed Solution:

  • Another user suggests modifying product.liquid or product-template.liquid with CSS targeting .product-image and .product-image img classes
  • The provided CSS snippet appears corrupted or improperly formatted in the thread

Current Status:

  • The original poster indicates the suggested solution does not work for their needs
  • The discussion remains unresolved with no working code implementation confirmed
  • The formatting issues in the shared code may be preventing proper implementation
Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I would like to have a fixed ratio of 2:3 for my product image on the product page. Would like it resized by height. Can I do so by coding?

https://giant-bicycles.com.sg/collections/components/products/rockshox-sp-reverb-axs-a1

2

Hi,

At product.liquid or product-template.liquid

Apply CSS Styles

.product-image {
   max-width: 100%;
   height: auto;
   width: auto\9; /* IE8 */
}

.product-image img {
   width: 100%;
   height: auto;
}
3

I don’t think this work for me