How to make UI image stretch to fill the screen?

🧑‍💻 Technical Support
1

The following code doesn’t work.

    const setImage = (img) => {
      ecs.Ui.set(world, component.eid, {
        image: require(`./assets/${img}`),
        width: window.innerWidth,
        height: window.innerHeight,
      })
    }

It works well if the image has the same w/h aspect ratio as the view port, but it has gaps when the ratio is different.

2

Hi, welcome to the forums!

What does your image look like? It could be that the image’s aspect ratio is affecting the way it’s able to display.

3

Thank you for your reply.

We have changed the ratio to be the same as the simulator, but it is not practical to adapt for every aspect ratio.

I wonder if there is any way to adaptively stretch the image.

Thanks,

4

Try changing the “BackgroundSize” attribute to “cover”.

5

WOW! Thank you!

It works like a charm!

1 Like
6

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.