# How do I top align an image? **URL:** \ **Category:** Questions about Thunkable X\ **Tags:** image, position\ **Created:** [August 14, 2020, 12:58pm UTC](https://community.thunkable.com/t/how-do-i-top-align-an-image/741736 "2020-08-14T12:58:34Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![unicornbrands](https://avatars.discourse-cdn.com/v4/letter/u/a8b319/32.png) [@unicornbrands](https://community.thunkable.com/u/unicornbrands)\ **Post date:** [August 14, 2020, 12:58pm UTC](https://community.thunkable.com/t/how-do-i-top-align-an-image/741736/1 "2020-08-14T12:58:34Z")
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. ![thunk](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/1/410f440b53d33588c6dbcd90a1f0afef757b1f4f.png) 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. ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [August 14, 2020, 2:19pm UTC](https://community.thunkable.com/t/how-do-i-top-align-an-image/741736/2 "2020-08-14T14:19:13Z")
Hi @unicornbrands, welcome to the community 👋 have you tried changing the vertical alignment of the Screen? ---
**Author:** ![unicornbrands](https://avatars.discourse-cdn.com/v4/letter/u/a8b319/32.png) [@unicornbrands](https://community.thunkable.com/u/unicornbrands)\ **Post date:** [August 14, 2020, 3:12pm UTC](https://community.thunkable.com/t/how-do-i-top-align-an-image/741736/3 "2020-08-14T15:12:11Z")
Hello @domhnallohanlon 👋 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. ![ratio](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/e/6e880a2493e4a3dd689c7704768b8c08a2d9c18b.png) 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. ---
**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\ **Post date:** [August 15, 2020, 6:44am UTC](https://community.thunkable.com/t/how-do-i-top-align-an-image/741736/4 "2020-08-15T06:44:33Z")
I see your problem! I’ll look at her decision. ---
**Author:** ![unicornbrands](https://avatars.discourse-cdn.com/v4/letter/u/a8b319/32.png) [@unicornbrands](https://community.thunkable.com/u/unicornbrands)\ **Post date:** [August 15, 2020, 7:28am UTC](https://community.thunkable.com/t/how-do-i-top-align-an-image/741736/5 "2020-08-15T07:28:22Z")
Definitely, it would be a big help, looking forward to the solution. ---
**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\ **Post date:** [August 15, 2020, 7:46am UTC](https://community.thunkable.com/t/how-do-i-top-align-an-image/741736/6 "2020-08-15T07:46:04Z")
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/](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. ---
**Author:** ![unicornbrands](https://avatars.discourse-cdn.com/v4/letter/u/a8b319/32.png) [@unicornbrands](https://community.thunkable.com/u/unicornbrands)\ **Post date:** [August 15, 2020, 8:30am UTC](https://community.thunkable.com/t/how-do-i-top-align-an-image/741736/7 "2020-08-15T08:30:08Z")
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. ---
**Author:** ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)\ **Post date:** [August 17, 2020, 1:05pm UTC](https://community.thunkable.com/t/how-do-i-top-align-an-image/741736/8 "2020-08-17T13:05:32Z")
I’m sorry, but I don’t understand. Does my portrait orientation solution work for you? ---
**Author:** ![unicornbrands](https://avatars.discourse-cdn.com/v4/letter/u/a8b319/32.png) [@unicornbrands](https://community.thunkable.com/u/unicornbrands)\ **Post date:** [August 17, 2020, 1:23pm UTC](https://community.thunkable.com/t/how-do-i-top-align-an-image/741736/9 "2020-08-17T13:23:56Z")
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 🙂 ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [November 8, 2024, 12:26pm UTC](https://community.thunkable.com/t/how-do-i-top-align-an-image/741736/10 "2024-11-08T12:26:39Z")