Need help scaling img evenly

[mathias]

Hi,

I have a Img that will change depending on what object is selected in a grid. so i change the "src" of the img object i have added to a HLayout.
This works, but i cannot seem to get it to scale evenly.

I have tried lots of things, adding it to a canvas with with and height, adding it directly, and playing with various values for with, height and imagestyle.

I am hoping this is super easy and that you can point me in the right direction :)

To be clear, with the canvas sized below, i want the image to be scaled so that when it's larger, it scaled down so that it's longest side is 200, and the shorter side is scaled down evenly.
example: an image that's 300px X 400px should become 150 X 200.

code:

 Canvas canvas = new Canvas();
canvas.setHeight(200);
canvas.setWidth(200);
image = new Img((String)null);//will set the src later in click-events
image.setWidth("100%");//have tried with fixed width, not setting height and vice versa
image.setHeight("auto");//last thing i tried, didn't work either
canvas.addChild(image);//have also tried adding the img directly to the layout
hLayout.addMember(canvas)

Thankful for help!

[Blama]

Hi mathias,

this should be pretty easy if you know the dimensions before. See this utility to do so. I have it in an old unmerged dev branch, but it worked there like a charm.

Best regards
Blama

[mathias]

Hey Blama, nice to hear from you. I don't know the dimensions before, i only have a url. It should still be possible to just scale, shouldn't it?

[Isomorphic]

We don't currently have a flag you can apply to Img or similar to achieve this, but there's a simple way to do it with CSS using the object-fit attribute.

Instead of writing out an Img, you can simply create a canvas with contents set to an HTML string like
<img src='foo.gif' style='width:100%;height:100%;object-fit:contain'>

(You probably also want to set overflow to "hidden" to ensure SmartGWT never attempts to expand the Canvas's HTML element to fit the image)

Regards
Isomorphic Software

[Blama]

Hi mathias,

using the lib I linked you'll give the URL, get a CallBack, it will load and once loaded your CallBack will be executed, if I remember right.
They also list the "dimensions" use case explicitly on their page.

But if Isomorphic's version also works, this would be better IMHO, as it needs less code.

Best regards
Blama

[mathias]

Just FYI, i ended up using Isomorphics solution, works great. Thanks for your input everyone :)