GUI - how to preserve image aspect ratio in grid

Questions
1

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?

2

Adding @msDestiny14 to help!

3

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?

4

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

5

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

OH! and image :wink:

1 Like
6

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

1 Like