Hi, I’m trying to make my product card images fit into a square container.
For my photography, landscape-oriented images are less than half the size of portrait images.
I’ve tried ChatGPT and the Shopify AI support app, but none of the code modifications they suggested have worked, with maybe 20 different ways to solve it with either CSS or liquid plus CSS. I also searched for solutions here.
Any tips?
I can find classes that allow an effect, but I can’t get the object to contain.
In the UI, I have the card image set to “Aspect ratio: Auto”, but have tried the solutions with square selected in case of some override I’m unaware of.
Thanks for the quick reply. I tried the class .product-media for the first part, which gets us halfway there. Progress, thank you.
I’ve tried .product-media img, product-media__image, and others (plus yours) for the second part, but I can’t get the horizontal images to contain themselves.
I think it’s that second class that’s been escaping all the solutions I’ve found so far.
Image attached showing the CSS update, if that helps.
Thanks again.
P.S., Sorry, I can’t crop my art at this level. I don’t mind doing that for collection covers, though.
If I set the UI option to Square and remove the top block of CSS, I get this:
(Well, not this exactly. To make it palatable, I made the grid full screen and lightened the font). Still don’t really like it, but at least art pieces are now the same size.
If you click around Photography – DavidRoberts.Art, you’ll see collections with horizontal and vertical images (affected by the above solutions).
The graphic art collections are mostly square art pieces.
Cheers
All the helpful previous community responses (all by one user) have been deleted; maybe the user left. So, it looks like I’m talking to myself. Which I do, but only offline.
The solution was the following: hopefully, this is helpful to someone else:
