How to prevent automatic image resizing in a gallery layout?

[Firestone]

Hi,

I am displaying some images on my website using a gallery layout, and my images are automatically resizing based on the size of the browser window. This causes the site to look really bad when the browser window is not the optimal size, as some of the image gets cropped out.

This is the page I am trying to fix.

https://thecanvas.global/pages/the-canvas-3-0

Thank you for your help!

[Akibhusen]

@Firestone , Please try the below CSS and let me know if it is working fine or still facing the same issue.

Add this at the end of your custom.css file.

.rimage-outer-wrapper.fade-in.lazyloaded{
background-size: 100% !important;
}

[Firestone]

Unfortunately this did not fix the problem, but thank you for responding quickly.  

[LitCommerce · Accepted solution]

Hi @Firestone,

Please go to Actions > Edit code > Assets > custom.css file and paste this at the bottom of the file:

.gallery__image.rimage-outer-wrapper.fade-in.lazyloaded {
    background-size: contain !important;
}

Hope it helps!

[Firestone]

This worked, thank you!