This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
JinJu Jang
Posted Jun 16 - Read on Facebook

When you create a superLayer and add an image to go inside and fit, is there any way to use "aspect fit" or "scale to fill"?

7 Comments

Balraj Chana

Hey JinJu, there's quite a few ways of going about this. Framer automatically maintains the aspect ratio when handling images so that they don't stretch. I'm assuming that by saying 'scale to fill', you mean stretch the images to the size of it's parent layer? If so, here's two examples of stretching an image to fill its parent layer without using the image property: http://share.framerjs.com/owlubtiuee1a/

You can use the HTML property to wrap the image inside an <img> tag and use the inline HTML image width attribute or better yet, use the style property and set the image as a background in CSS.

JinJu Jang

Hi Balraj, Thanks you for your comment! I want to make clear about my goal.

I'd like to apply an image into a layer, and here are the steps I'm thinking of.

1. Match the image's width to a layer's width.
2. Height is also changed accordingly (Keep aspect ratio)
3. If image's height > layer's height, this image will show as cropped.
4. If image's height < layer's height, this image will have some spare space but didn't get trimmed.

I wonder there is any way to make this steps easier. But what you gave to me is a definitely a nice clue to start with. :)

Balraj Chana

Ok that makes sense. So you just want to set the image width to 100% and set the height to auto. Here's the updated example: http://share.framerjs.com/vz0jp1rzjxki/. Let me know if that helps :)

JinJu Jang

Definitely! thanks Balraj!

JinJu Jang

Hmmm. but some reason the link you gave me is missing download / open on Framer links... :/ Sorry to bother you, but could you look into those one more time? thank you so much!

Balraj Chana

JinJu - it works on my end, have you tried refreshing the webpage if the zip extraction hangs? Here's the code anyway:

height = 500
width = 500

layerA = new Layer
height: height
width: width
x: 0, y: 0
html: "<img src = 'https://yourImage.jpg' height = 'auto' width = '100%'>"

layerB = new Layer
height: height
width: width
x: 0, y: 700
style:
"background" : "url(https://yourImage.jpg) 0px 0px / 100% auto no-repeat"

JinJu Jang

Oh! so the height = 'auto' works as inline Html, that's a good thing to know!

Read the entire post on Facebook