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

What is Framer? Join the Community
Return to index
Jon Madison
Posted Mar 08 - Read on Facebook

how do i/is there a way to auto scale a single dimension of an image set on a layer?

10 Comments

Jordan Robert Dobson

You would have to set the style: backgroundSize: "100px 50px"

Jon Madison

so:
l = new Layer
backgroundColor: "rgba(255,255,255,0)"
image: url
width: 200
backgroundSize: "200px auto"

print l.height

doesn't seem to work. it stil gives me 200.

what i'm trying to do is set an image in a layer, then have that layer dynamically resize based on the width i set, so that i can now adjust it's container accordingly. The image is determining the size of the layer and everything else surrounding it

Jon Madison

(sorry indentation didn't pan out)

Jordan Robert Dobson

style:

Jordan Robert Dobson

Ohhhhhh

Jordan Robert Dobson

So you want like an intrinsic height based on the layer width. Assuming it's dynamic?

Orfeo Chen

Maybe go the "scale" way, instead of setting dimensions individually?

Jordan Robert Dobson

I think you could load it into the dom and then measure it there before you actually render it?

Mike Johnson

I had to do this recently, I can share some code when I get back to my desk later today.

Mike Johnson

Sorry for the delay, with a newborn I haven't had a chance to sit down... :)

Trick is to listen for the ImageLoaded event on the layer, then just set height proportionally to the original image height. The original image is an argument that is passed to the ImageLoaded callback, so you can access it's native height/width to get the original aspect ratio.

https://framer.cloud/GtUiD/

Read the entire post on Facebook