Allow images to retain aspect-ratio on image override in component

mmyron

Hi there! I have been designing a component that uses an image:

This is all fine so far, but when I try to replace the image, the new image does not retain its aspect ratio (you can see how the example image of the mountains is very squashed along the x-axis):

Preferably, I would like to be able to describe a max-height or max-width for the component image, and consequently, the image override would retain its aspect ratio while conforming to the component.

I would love to see something like this in the future to allow for more powerful and dynamic components. Thanks!

MrMattSim

I have two recommendations:

1: If a collection of images all have the same use-case then create them with the same pixel size. (This could easily be done with artboards of the required size. Drop one image per artboard, then export them all. Now use those as your thumbnails)

alternatively,

2: For each unique image size, create a component, which contains an image of that size with a mask of the required size for the thumbnail.

Components / Thumbnail200px-from100x200

Components / Thumbnail200px-from150x200

Then you can just swap to a different Thumbnail component if the image is a different size or ratio. (Of course, this is best if there are only a few types of sizes. If each is totally different, then option 1 is better)

justiceankomah

I have also been facing the same issue. But do you think setting a max-height longer than the width of the component will solve this. I don't think so and that's not how i went about with mine.