How to set Dawn default collection page to adapt to the banner image ratio

[AlanDerrick]

I need to set the default collection page image ratio to "adapt to image" similar to the setting for the home page. Does anyone know how to do this?

Currently, it crops the image based on the browser window size.

[JHKCreate]

Hi @AlanDerrick 

Would you mind sharing your store's URL so we can provide a solution for that? Let me know!

[AlanDerrick]

Home page url where images display without cropping:

https://shop.carpentercore.com/

Some collection page urls where images get cropped:

https://shop.carpentercore.com/collections/wooden-gift-crates

https://shop.carpentercore.com/collections/wooden-wine-bottle-gift-boxes-and-crates

[JHKCreate]

Add the following code to the end of the base.css file:

#shopify-section-template--15144234287253__banner > div > div > div.collection-hero__image-container.media > img
{
object-fit:contain!important;
}

Should that help answer your query, we always appreciate liking & marking an as answer to let the community find quality solutions faster. Thanks!

[AlanDerrick]

The additional code did not appear to work. I've attached a screen shot showing how I placed it. The theme seems to force the graphic into a 9:16 ratio container. My graphic is 1:1.