Set element dimensions to fill different screen sizes

[nasjarta]

Hello

Is it possible to scale an element (for example image) to fill the entire screen in different screen sizes like mobile tablet etc.

At the moment what I did was get canvas size by this.app.graphicsdevice and resized the element height and width according to each device however in some devices it does not fill the screen completely.

My element is inside a 2d screen and anchored to the center pivot.

Thanks

[Leonidas]

Hi @nasjarta,

Check this post, it discuses that:

Scale background image to screen size

It sounds like you want to do the equivalent of CSS cover property. I’ve got an example here that works with a square image: Responsive UI for all device in PlayCanvas If your image is non-square, you will have to adapt the code. If the game is only going to be portrait, what oxters168 suggested will work too.

[yaustar]

With image fitMode, you can now do this more easily.

Set the image element to anchor to all 4 corners of the screen and set the fitMode to ‘cover’ which will cover the area of the element bounds and keep aspect ratio: Release v1.21.61 · playcanvas/editor · GitHub

[nasjarta]

Thank you it worked!