Component Image height variable

Hello @Lee8, Thank you for reaching out about image fill. I truly appreciate you sharing helpful information with us!

In Figma, images are not treated as their own object type, but rather as fills. The interesting part is that because images are treated as fills, you can use this method to add your selected images to pre-existing shapes. Within that shape, you can switch the Fill mode between Fill, Fit, Crop, and Tile.

It seems that the image mode in your component is Fit. Fit ensures that the full image is always visible within your shape, which may result in blank space (padding) around the image. While we want to help you achieve to adjust the height, I couldn’t find any resources to help removing the space around the image.

Here are some articles for more details:

• Working with images in Figma
• Adjust the properties of an image

I hope this clarifies things a bit. We regret that we might not be able to fulfill your request at this time, but we think what you want to achieve is a very appealing suggestion. If you’d like, please post your idea to “Share an idea” category.

Let us know if I missed anything! We also welcome any insights, workarounds, or helpful plugins from community members, so please feel free to share!

Thank you.

FYI: I found a post that almost same as this post. I unlisted that to maintain our forum tidy.

Still no solution? Got the same problem

You can use one of the plugins that let you lock the aspect ratio. For example, there’s this one: https://www.figma.com/community/plugin/1234709595094737890/lock-aspect-ratio-by-divriots

Once you lock the aspect ratio, set the resulting element to Fill width - the height will adjust automatically.

I have a possible hack. If you set the height of the image to a variable, then you can create different modes for each image’s individual height and select them in each corresponding instance.

This does require you to figure out the correct height beforehand :-( . It’s more useful for screens with consistent widths.

I ran into this same problem when I was working on my website https://heightcomparisonchart.com/. The issue happens because the image is inside a fixed-height container, so when you swap in something like a landscape image, the frame doesn’t shrink and the content below doesn’t move up. Since Figma doesn’t have a “hug” height option for image fills, the container won’t automatically resize to match the image’s aspect ratio. The workaround I use is to place the image as an actual image layer (not a fill) and set it to “Fit” or “Fill” with a fixed width so the height adjusts proportionally. Another method is to put the image inside its own frame, turn off “Clip content,” set that frame’s height to “Hug contents,” and then use Auto Layout to stack the text and other elements underneath. This keeps the width fixed while letting the height change based on the image ratio.