Resize Poster Image on Desktop

I am trying to resize the first image you see on my homepage on desktop. I have used CSS to alter the size of the text and button on mobile and I'm happy with how that looks now but I want the desktop image to have a ratio of 2:1 without stretching the image, just cutting off the top and bottom. 

www.batchcoffee.co.uk

Thanks in advance guys 🙂

It looks like you are using a poster image, which should keep it's inherent ratio (unlike a background image, which fills the space). Are you wanting it to crop on desktop?

You could try this Custom CSS:

@media only screen and (min-width:768px) {
  #block-yui_3_17_2_1_1666910696019_17181 {
    padding-bottom:50% !important;
  }
}

Hey Ziggy! 

Thanks for getting back to this. 

So I want the desktop image to look how it looks now (I just changed it). But the mobile image to be the full image. I basically want the desktop to be cropped from the top and bottom. 

🙂

Did the code I shared work?

No. It didn't do anything. I altered the image by making it shorter in edit.

Hey Ziggy,

I hope you are well?

I'm still trying to find a solution for this if you have one?

At the moment I'm happy with how the image looks on mobile, however I would like the ratio on desktop to be 2:1.

🙂

Why not use the image as a background for the section rather than an image block, it would be easier to control the height, possibly by using this solution:

https://www.will-myers.com/articles/prevent-background-images-from-cropping-in-squarespace-71

Cheers Ziggy. My template doesn't have the option of background images. I'm sure this is a problem that many people must face. I would have assumed there would be an easy fix. Surely not everyone wants the same size image on desktop to mobile. 

Managed to sort it with this code 🙂

Thanks though mate.

@media screen and (min-width:641px) {
div#block-yui_3_17_2_1_1666910696019_17181 .content-fill {
    padding-bottom: 50% !important;
}
}