Skip to main content
Question

Can the “Fill” image align to the top instead of center?


DavidTC

I resurrect this topic from another user that was closed without any response.

For example:

Using the Fill option for the image, the image will be center aligned when the container size changes.

I need the image still fill the width of the container, but align to the top of the image, instead of the center. Crop doesn’t work, bc it will scratch the image only on the X-axis.
The container can get wider, but the height is fixed.

I tried different way (change the image to scale, auto layout, etc) and couldn’t find a way to achieve this.

Anyone knows a trick? Or this is something Figma cannot do at the moment?

Thanks!

10 replies

Klesus
  • 237 replies
  • July 4, 2022

Go vote for it!


DavidTC
  • Author
  • 21 replies
  • July 4, 2022

I read it and I voted before publishing this haha. Guess there’s no way right now.


Luke_Connolly1

Adding a comment here to say this is critical for me! I have a “search result row” component with an image in each. The image proportions vary, so in order to convey how the alignment should work (to developers), I need a way to set an image to “fit” but align it to the top of its container. Figma, please help!


Rafastesia
  • 25 replies
  • September 16, 2023

Let’s revive this!


  • 3 replies
  • October 9, 2023

I think its time that this should be considered… as the link mentioned above How can we improve the Image tool in Figma? (Concept) | by Андрей Насонов | UX Planet the concept is quite clear


Matthew_green

Actually, a quick way to do this is to mask the image with the shape you want it to fill. To do this select the shape you want to fill with the layer palette on the left. Then use the hot key ctrl + shift + k. (I’m using windows). Then select the image from file explore and select open. You will then be able to drop the image in the shape, size it and adjust it as you wish.

Hope this helps.


DotNetDesigner

Isn’t it also possible to just change it from “Fill” to “Crop” and align the image however you need it to be? I’d love to have quick “align-top” or “focus on this” functions with the fill image, but crop allows me to do just this and with specificity. Just a consideration.


DavidTC
  • Author
  • 21 replies
  • October 28, 2024

The thing is, with Crop you cannot transform the container without messing the image.

What I’m requesting is, permit the user to align the image inside the container, the same way constraints work.


Julia_Shlyapnikova

I would love to have this feature


noella.choi

Yes. We need more control over images here.

  • Allow custom contraints for fill setting
  • Allow image aspect ratio lock in the crop setting

I don’t know about anyone else, but I’m not editting my image to be the aspect ratio for fill, then export, then reimport so that I use the “FILL” feature.

I will use “CROP” and position it however I want. And then would expect that image to be centered around where I’ve cropped it with aspect ratio locked on that image and NOT have it stretch. Who wants their image to stretch by default. It we want to stretch it, we can open up “CROP” and stretch it.


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