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

Ask the community
1

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

For example:

image
image1920×487 101 KB

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 Likes
2

Go vote for it!

3 Likes
3

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

1 Like
5

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!

2 Likes
6

Let’s revive this!

2 Likes
7

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

4 Likes
9

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.

10

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.

1 Like
11

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.

1 Like