How to set minimum height of an image so that it doesn't get cut off in desktop view?

I am trying to achieve parity between my desktop and mobile versions of the site. 

 

When the site gets too wide in desktop view, the images zoom in a strange way. All I need to be able to do is configure a minimum height option somewhere but cannot find anything that does anything like this. 

 

Please help! 

1,306 Views
Message 1 of 6
Report
5 REPLIES 5

We upload our item images at a 1:1 ratio (example: 720 x 720 or larger),  seems that has worked well for us for both Desktop and Mobile Views.  

1,277 Views
Message 2 of 6
Report

Thank you--I will give this a shot and report back with how it goes! 

1,213 Views
Message 3 of 6
Report
Alumni

Hi @naturalglow - Thanks for reaching out to the community for advice on this!


If you’ve not had any success with what’s already been suggested, (Thanks for sharing what’s working well for you @JK_Fiber_Art), could you provide a link to your site and give us an example of an image that’s not behaving as expected when you zoom? 


I’d also suggest taking a quick look at this thread, as it sounds like it might be similar to what you’ve experienced. 

1,241 Views
Message 4 of 6
Report

So sadly that 1:1 trick did not work for me 😞 

Here's my site--to get an idea of what I'm struggling to achieve, look at the bottom picture with the quote from the spa founder. 

 

https://www.naturalglowesthetics.com/

 

It's incredibly difficult to get photos like this to have the proper height. All I really need to be able to do is have an image auto-fill at 100%, then be able to define it's minimum height.

 

1,186 Views
Message 5 of 6
Report

@naturalglow 

 

Sorry, I was assuming that you were referring to your "Item" images whereas a 1:1 ratio works fine - I should have asked you first to post the URL to an example as were thinking about two different images - I'm thinking item image and you're referring to a page background image - it happens.   Perhaps 2,000 x 1,000 pixels will work better - start with your original image and change the image size to 2000 x ? -  the ? will be what every size your editing software makes it when maintaining the aspect ratio.   For example many of my images are 4032 x 3024 - after resizing it's now 2000 x 1500 which maintains the aspect ratio - after that I crop the image so it's 2000 x 1000 keeping the part of the image that I want to be seen on my webpage.  Hope that makes sense.

1,148 Views
Message 6 of 6
Report