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.

https://x.thunkable.com/projects/5f3782100444f97d8929f9f5/project/properties/designer/

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: