Skip to main content
DavidTC
DavidTC
New Participant
July 4, 2022
Question

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

  • July 4, 2022
  • 10 replies
  • 7263 views

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

For example:

image

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!

    This topic has been closed for replies.

    10 replies

    Klesus
    Klesus
    July 4, 2022

    Go vote for it!

      DavidTC
      DavidTCAuthor
      New Participant
      July 4, 2022

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

        Luke_Connolly1
        Luke_Connolly1
        New Member
        July 11, 2023

        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
          Rafastesia
          September 16, 2023

          Let’s revive this!

            Marc2
            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
              Matthew_green
              June 14, 2024

              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
              DotNetDesigner
              September 4, 2024

              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
                DavidTCAuthor
                New Participant
                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
                  Julia_Shlyapnikova
                  Active Member
                  November 27, 2024

                  I would love to have this feature

                  noella.choi
                  noella.choi
                  New Participant
                  November 28, 2024

                  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.

                    Terms & ConditionsAccessibility statement