GUI - how to preserve image aspect ratio in grid

Hi there,
i’m using GUI with some grids. I’ve two grids one inside the other:

masterGrid: 1row x 2cols
childGrid: 3rows x 2cols

The child grid is inside the masterGrid in the 2 column.
In the first column i only want to show an image.
This is my test PG: https://playground.babylonjs.com/#E2ELYS#7

The problem is that i don’t understand how to preserve the image aspect ratio. In the PG the image is adpated to the grid cell size. How can avoid that?

Thanks :wink:

EDIT:
I get some result using autoscale (line 103 of this new PG https://playground.babylonjs.com/#E2ELYS#8):

im.autoScale = true;       
im.scaleX = 0.3;           
im.scaleY = 0.3;

But in this way if i resize the image doesn’t scales. Is there any other way to do that?

Adding @msDestiny14 to help!

Hello. Yes auto scale should be doing the trick. Though I’m not sure what you are trying to do by the last line “But in this way if i resize the image doesn’t scales.” Do you mean if you resize the grid?

Yes, sorry. If i resize the browser window and the grid, the image doesn’t scales.

Try setting width and height to 100% and turn autoscale off. Is that what you have in mind?

OH! and image :wink:

BABYLON.GUI.Image.STRETCH_UNIFORM do the trick!
Thank you :wink:

1 Like