How to make all product images the same height?

[global_jerseys]

I am trying to have all the product images on my site automatically adjusted to the same height. How do I make them all the same height? I have seen this question asked previously and can see there is a code solution, however every suggestion I have tried either doesn’t make any difference or results in the images not loading at all.

Site url: global-jerseys.com

Theme: Fashionopolism version 4.4.2

[Moeed]

Hey @global_jerseys

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Mehran_Ali]

Hi @global_jerseys

You can simply use this CSS in your code-editor Theme.CSS or base.css file it will help

.product-car .prod-container { height: 250px; }
.product-car .prod-container .prod-image, .product-car .prod-container .prod-image>a .reveal, .product-car .prod-container .prod-image>a img { width: 100%; height: 100%; }
.product-car .prod-container .prod-image>a { display: inline-block; width: 100%; height: 100%; }
.product-car .prod-container .prod-image>a img { object-fit: cover; }

Here is the End Result

If This Solution Word Kindly Like this And Mark it as a Solution or Buy Me a Coffee

[Dan-From-Ryviu]

Hi @global_jerseys

You can check in Online Store > Themes > Customize, select that section, and check if it has the option to set up Media and image ratio. Then, select the Portrait or Square option, save, and check again.

[global_jerseys]

Thanks so much! This worked perfectly. Is there also a way for the images to be made the same height in each product page?

This is what it looks like now for example