How to change the aspect “portrait” image ratio of the product card on the collection on Dawn theme?
When I select “portrait”, the ratio sets with 2:3. But I would like to have the image ratio 9:16 instead of 2:3 on the collection page when I select “portrait” in the 3 options. The ratio of 2:3 is fitting with most of my product images.
I don’t want to select “adapt to image” for a certain purpose. I would like to change the aspect “portrait” image ratio.
Always backup themes and files before making changes
You’ll need to either modify the class .media–portrait in base.css so it’s the appropriate percentage.
Or modify the aspect ratio padding calculation in snippets/product-card.liquid around line 75.
The padding trick is a CSS method to normalize image aspect ratios.
https://css-tricks.com/aspect-ratio-boxes/
Thanks a lot, PaulNewton!
Sorry, I misunderstood. Most of the ratio of my pictures is 2:3, not 9:16.
Although most of the ratio of my product images are 2:3 and I select “portrait” at an image ratio such as 2:3 but the images on my computer screen are a little bit cut off on the collection( you can see it on my screenshot). When I select “adapt to image”, it looks fine. The image ratio must be 2:3 just as in original pictures. But when I select “portrait”, it seems like not 2:3. The image is a bit cut off.
I don’t know what is wrong?
The problem is I need to select “portrait” for a certain purpose. I want to present all the pictures(a ratio of 2:3) on a collection without cutting them off when I select “portrait”.
Can you help me?
I fixed it.
You’ll need to either modify the class .media–portrait in base.css so it’s the appropriate percentage.
line 1137 .media–portrait { padding-bottom: 125%;}
With this aspect ratio of 2:3, the height is 1.5 times longer than the width. It means 150%, not 125%.
It is said, the ratio of the portrait on the Dawn manual is 2:3. But actually not. It must be an error.
So I changed like this.
.media–portrait {padding-bottom: 150%;}
Now it works perfectly.
