Swapping instances of image in a component but keep position and proportions

Share an idea
,
1

I have a page layout which has a landscape rectangle placeholder component for an image.
I have a library of images of different sizes and ratios e.g. some are tall, some are short, none have the same dimensions. I’ve turned these images into components in order to swap into the placeholder image component.

I want the swapped image to fill the width of the placeholder and then as much of the height as possible, keeping original image proportions intact. It should start at the top of the image - e.g if its a portrait photo you would see the top of the head at the top of the image - not the chest.

I’ve tried variations of the constraints on the library images (e.g. left and right, top) , but in the swapped component the image either distorts, or is not placed at the top. I’ve also experimented with the image settings - crop, fit, fill, the closest was “fit” but then the image is not placed at the top - there is empty space above it.

Not sure if this is 100% clear, but if you have any suggestions or questions please drop a comment and maybe we can solve this together.

2 Likes
2

Honestly? If it were me, I would create a master component (your container) then create variations for each image and manually resize & reposition. You can crop by using the clip content setting. Maybe even just take a day to add a property for different container shapes and sizes, and then you have a master image component you can reuse for every project.

I know it sounds like a lot of work, but if you forsee yourself needing something like this often, it could save time in the long run. Because, while there might be a setting that will fill the image to fit the container, no automated option is going to crop and position every image in a random assortment aesthetically.

1 Like
3

Thanks for your response. The thing is i’m working in a team and they will be continuing to add images to the library so I was looking for a way to avoid having to go in an manually adjust every.single.one :sweat_smile: If only Figma had a way of setting the image to fill the width and start at the top that would seem to fix but alas seems they don’t for now…

3 Likes
4

@DNLBTLR that absolutely makes sense. I have trouble with image resizing in Figma myself, but I think this would be a feature request/enhancement, unfortunately :frowning:

1 Like
5

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.