Center Image on all Devices

Hi,

I’m new to this, so please excuse me if this question is too easy, but I just can’t get it right.

Maybe I’m thinking too complicated, so I’m also open to suggestions if a different approach would be advantageous.

I want to show an image on the first page when the app starts. This image should disappear after a short time and the log in window should be shown. I was able to build the logic behind it and it seems to work.

I’m currently having problems with centering the image:
The image should be fully visible and centered on all devices (iPhone, iPad, web). Of course not too small. It can take up to the maximum height.
If I do it for one device, it looks disastrous on the other devices. Just can’t figure out how to center on all devices in the right size, so the picture is visible. (The hight of the picture is higher then its width)

Hope someone can help me!

Thx in advance!

What you want to do is put your Image in a Container, and on the Container Layout properties set the alignment like this:

Capture

Hi John,
thx for the fast help! But somehow it doesn’t work.

This is how it looks on the iPhone. You can see the image completely, but there is more space on the bottom and less space to the top.

This is how it looks on the iPad. You can’t see the whole image?!

This is how it looks on the web App.

  1. Is your Page Layout Style set to ‘Stretch to Viewport’ Height?
  2. Is your Image Style Resize Mode set to ‘Contain’?

It wasn’t.
Changed it now.
Still the same outcome.

:unamused:

Have you explicitly set Height and Width of the Image component? I remember if you left the dimensions empty it had strange results.

I tried it with explicit values and I tried it with formula (systemVars.dimensions.viewport.width and .hight). Using formula brought me a little bit closer. The Image is now visible from left to right completely on all devices. The bottom of the image is still missing on web and iPad. And it is still not centered horizontal on the iPhone…