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"?
would love for Framer to do this work for me. :-)
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.
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. :)
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 :)
Definitely! thanks Balraj!
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!
JinJu - it works on my end, have you tried refreshing the webpage if the zip extraction hangs? Here's the code anyway:
height = 500width = 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"
Oh! so the height = 'auto' works as inline Html, that's a good thing to know!