How can I prevent the hero image from being cropped on full screen in Chrome on Windows?

Store Design
1

Hi,

I recently changed the site (littleblackdiamond.com) to the Debut theme.

I’m aware it’s a default on the Debut theme for the hero image to be cropped when full screen. For some reason, it doesn’t get cropped on Chrome and Safari on Mac and I wasn’t aware of this until today when my client viewed the site on Chrome on Windows/PC.

Is there a way to not have the hero image cropped when full screen or increase height of that section?

Here is how it looks - the top of the hero:

lbd-1.png
lbd-1.png600×282 269 KB

and bottom of the hero:

lbd-2.png
lbd-2.png600×280 239 KB

But when you shrink the browser, it resizes to fit everything okay:

lbd-3.png
lbd-3.png600×464 383 KB

Thanks in advance for any assistance.

2

Please place this code at the end of theme.scss

.slideshow__image {
background-size: contain;
}
@media only screen and (min-width: 750px) {
.slideshow {
    position: relative;
    max-height: 195vh;
}
}
3

Awesome, thank you so much @Hardik29418 !