Skip to main content
Question

Image doesn't scale at Bottom When Scaling Window in Figma

  • January 18, 2025
  • 3 replies
  • 42 views

Sakra

I'm working on a website design in Figma and have a full-screen image placed below a navigation bar. When I resize the window, the image scales correctly but gets cut off at the bottom, as if there's an invisible limit. I've already made the page longer, but the issue persists. How can I fix this so the full image is always visible when scaling?

Would appreciate any help!

Gif Example

In the following example you can see that when I drag the window to the right to enlarge the window, the image doesn't scale with it on the bottom, almost like there is an invisable limit like stated above.

3 replies

Avokadomos
  • New Participant
  • 376 replies
  • January 18, 2025

That’s hard to know without seeing your layers. Can you show us how that frame is set up?


Sakra
  • Author
  • New Member
  • 1 reply
  • January 19, 2025
Avokadomos wrote:

That’s hard to know without seeing your layers. Can you show us how that frame is set up?

Absolutely, let me add some screenshots to the appendix so that you have a better understanding of my current set-up.

See appendix


Avokadomos
  • New Participant
  • 376 replies
  • January 20, 2025

I understand now. Your image layer is scaling together with the frame when you’re adjusting the window size, because you have the constraint set to Left + Right, and because the image is set to fill, it’s going to resize outside it’s layer’s bounds.

The reason you get the border at the bottom is simply because the image layer isn’t tall enough to incorporate the scaled up image. If you resize the frame in the editor, you’ll see what’s going on. It’s just the image scaling inside of the image layer.

Here are the different modes: https://www.figma.com/best-practices/working-with-images-in-figma/#fill

If you can’t get your desired result, then let me know what that is, and I may be able to give you some pointers.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings