How do I top align an image?

I want to add a Header Image in Homepage on the Top with 100% Screen Width and Automatic Height according to device’s resolution.

I uploaded the Image with these properties-

Width [ Relative Size= 100%] and Height [Fit Content]
Picture resize mode = Contain**
Screen’s Vertical Alignment = Top

and the result is that - Image is getting placed in Center of the Screen, not on top.

Image has No Paddings and No Margins

I tried using Image’s height as- “Relative Size” and “Absolute Size” but then the Image’s height is Not True to the Ratio with the 100% Width across different mobile devices.

I have tried every possible permutation and combination from Yesterday but have failed every time.

Please!! help me, really need to get this fixed asap.

Hi @unicornbrands, welcome to the community :wave:

have you tried changing the vertical alignment of the Screen?

1 Like

Hello @domhnallohanlon :wave:

Yes, i had set the Vertical alignment of the screen to - “TOP”

But it has no effects on the image.

Using other Image Height Methods like- Relative Size & Absolute Size Makes the image to start from the top, but-

The real issue is that After setting the Image’s Width to 100% , i want the image to Automatically Adjust to the Height according to the aspect ratio of the real image.

If i enter 40% Height or 400Px Height then the image will not be in a ratio according to the Image’s 100% width.

How can i make this image Responsive to different mobiles?

I didn’t wanted to mention but- i have used K*dular for over a Year now to build multiple apps but have now switched to Thunkable due to Native apps compatibility.

K*dular had simple image feature like - [Image width = 100% and Height = Automatic] which use to get the job done.

But i’m unable to do so here, even after trying for 2 days.

Please help me out Sir.

I see your problem! I’ll look at her decision.

1 Like

Definitely, it would be a big help, looking forward to the solution.

You can’t solve this problem for one simple reason:the Image component is not working correctly and there is a problem with the Image blocks.ComputedWidth and Image.ComputetHeight. The basic solution is shown in the link example.

If you also need to rotate the screen, I’m afraid that there is no solution for this case, because there is no way to track the orientation change event.

1 Like

You’re right @actech unfortunately there is no solution to this.

If we assign a Height to the Image then- it will loose it’s Orignal ratio in different mobile devices.

Thunkable has made the designing process unnecessarily complex and have ignored the basics of UI Design.

I request the Thunkable team to make the Designing process more Responsive, So that- the designs can run flawlessly on different mobile devices.

I’m sorry, but I don’t understand. Does my portrait orientation solution work for you?

1 Like

It works when we Assign the Image height in Absolute Size (Pixels) .

Otherwise- either Screen Scrolling or Top Align will not work.

Anyways, Thanks for the help @actech :slightly_smiling_face: