Images wont stretch properly for big screens.

Marcus_Zimmer
New Member
7 0 0

What is the best way to keep images from stretching to absurd lengths on bigger screens (currently using a 27" display". )

For example, if I condense the window size my images are working perfectly. 

bannerboxsmallscreen.PNG

 

But when I set my browser to full screen it just stretches it like this. 

largebanner.PNG


How can I fix this? Thanks

Replies 2 (2)

Marcus_Zimmer
New Member
7 0 0

I guess what I should say is, stretch the image without directly affecting the height of it. 

I figured out that the image stretches because object fit: cover (in main.css under img{}), which correctly resizes the image with the size of the screen, but in turn, zooms the image in like the 2nd photo.  If you tick it off you will keep the same height and instead just stretch the image to fit the screen width. 

I guess my new question is how do I make images look less stretched if I do so. Is there a better way at tackling this problem? 

tim
Shopify Expert
3333 258 1243

Well it depends on what your theme allows.

I guess you're limiting the section height? Using the "Adapt to image" will make your banner grow without stretching. However,  on an ultrawide monitor it may result in a banner being taller than screen 😞

 

Since you have a carousel, I'd consider switching to showing 2 slides side-by-side on very wide monitors.

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.