How to stop cropping of images in collection pages and thumbnails? Dawn Theme

[RemG]

Hi,

I am currently on Dawn 7.0 and would like to upgrade to 9. I have downloaded the theme and I am unable to add padding to my non square images to prevent them being cropped.

I currently have this setup on my working site:

This is the link to the updated Dawn theme and how the images are showing, as you can see they are being cropped to a square rather than keeping the original ratio and having padding added in: 

https://80jalsy4d1up5f3t-19218055.shopifypreview.com

Cheers.

[NomtechSolution]

1. In the left-hand sidebar, click on "Edit code".
2. In the code editor, open the "theme.scss.liquid" file located under the "Assets" folder.
3. Scroll to the bottom of the file or find a suitable place to add your custom CSS code.
4. Add the following CSS code to add padding to non-square images:

.grid__image {
  object-fit: contain;
  object-position: center;
}
​

[RemG]

Thanks for the reply, I do not have a theme.scss.liquid file. I tried placing in the base.css file however this did not work.

[Nakatomi]

Thanks for the hints here, this ended up working for but with a different css selector (maybe the name has changed in more recent template code?):

.card__media .media img {
  height: 100%;
  object-fit: contain;
  object-position: center center;
  width: 100%;
}