Auto Scaling Image when Browser is Resized

Design help General
1

Hi,

I have been trying to create a banner of an image and some text that is static at the top of my page. However, I cannot seem to figure out why when I test and resize my window that my image doesn’t scale itself along with the size of the browser.

The only thing that happens is Webflow decides to leave my image it’s standard size and zoom into a portion of the image inside of rescaling the image down.

Any help would be greatly appreciated. Thanks!

Here is my public share link:
https://preview.webflow.com/preview/dc-2017-website?preview=4eb4f971b2fef35d95803eecc574fa82

2

Is this not the behavior you’re looking for? What you’re describing sounds like some weird glitch.

1425×578 1.35 MB

3

That is what I would like to have. However as soon as you hit the halfway point when resizing the browser, it automatically jumps to the orange light and stops scaling down.

4

Ohhhhhh. That’s because, at that point, you’ve actually gone down into the tablet breakpoint.

5

Oh, I see. So at that point, I need to go in and manually resize the image to how I want it in the tablet and mobile size?

Sorry if this is basic stuff, I just started using Webflow this morning!

6

That’s fine! At the top of the designer window, you’ll see 4 icons. From left to right they are desktop, tablet, mobile landscape, and mobile portrait. If you click on each, you’ll see the different sizes. You can set the image to do whatever you like at the tablet and mobile size.

Keep in mind, very, VERY few people ever resize their browser window at all, and the only people who make it as narrow as you were making it are designers. lol

7

Thanks! I appreciate it. I figured it out :slight_smile:

1 Like
8

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.