# Layout help? Added space when changing images **URL:** \ **Category:** Questions about Thunkable X\ **Tags:** beginner, layouts\ **Created:** [March 16, 2021, 1:54pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505 "2021-03-16T13:54:53Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\ **Post date:** [March 16, 2021, 1:54pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505/1 "2021-03-16T13:54:53Z")
I’m having issues with layout in an app I’m building with the kids I coach. I’ve built a minimalist example that illustrates the problem here: [Thunkable](https://x.thunkable.com/copy/144fb3d30d531c9a48d3b24a24b2acfd) UPDATE: I can reproduce the problem even without switching images, as shown in post #6 (below). It’s a problem with setting height to “fit contents” for an image. Does no one else want their images to be full width and the ‘right’ height to hold the image? Original post continues below: Basically, the layout switches between images, which are different sizes. Each image needs to be at the top of the screen, without a bunch of extra padding. Here’s what I get in Thunkable Live (on iPhone). The webviewer result is similar. The yellow is the column containing the image and buttons below it. The red is the border on the image. The actual image is the dragon/balcony with the black outline showing the actual image border. The extra padding appears both above and below, but I’ve got padding and margins set to 0. ![bug2](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/5/0505ca7f1055c54c78cd41a0beccf718ffbae70d.jpeg) ![bug3](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/6/56c9a6a4318d560a3b0218190e8d2ea8a349c6a1.jpeg) And here’s how it looks on my design screen - I’m not coding extra space! ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/b/6bf38f76d160f52477b7a463a4833f11c8114b72.png) A few settings that might be relevant: COLUMN: height is set to fit contents. The width is set to 100%. Vertical alignment is set to top. IMAGE: Picture resize mode is contain, height is fit contents, width is fit contents. In the advanced tab, sizing is set to flex, maxWidth is 100%, and maxHeight is 80%. Can someone help me understand what I’m doing wrong, and better yet, how to fix it? Thanks! –Cathy ---
**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\ **Post date:** [March 16, 2021, 2:14pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505/2 "2021-03-16T14:14:55Z")
I tried removing the column and just putting images in the screen itself. No improvement, but I did make it even simpler (and broken)! ---
**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\ **Post date:** [March 16, 2021, 8:18pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505/3 "2021-03-16T20:18:56Z")
This appears to about 95% fix my problem, BUT it’s a choice between a long enough lag that the resize is really obvious, or the resize sometimes not happening. Better ideas? ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/9/8909c1170a6e007bb5f0e285cef7ba5f7c7d3451.png) ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [March 16, 2021, 9:46pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505/4 "2021-03-16T21:46:22Z")
You know, I checked out your minimal project and I can see the problem but I don’t know how to fix it. There’s nothing obvious – to me – causing it. And yet it persists. ---
**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\ **Post date:** [March 16, 2021, 10:39pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505/5 "2021-03-16T22:39:34Z")
Well, I guess I’m glad it isn’t just me, but umm… ---
**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\ **Post date:** [March 23, 2021, 1:24pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505/6 "2021-03-23T13:24:52Z")
So I’m continuing to be frustrated by this. I have a bunch of images. I’d like to put one on a screen and have it be 100% of the screen width and whatever height corresponds to the scaled image. Short of determining the dimensions of every image and using that to manually set absolute heights, is there a good way to do this? I thought the problem was that I was changing images after the screen loaded, but I can reproduce the problem by dragging a wide image onto an empty screen, setting height to ‘fit contents’ and width to 100%. It looks fine on the design viewer, but like this on Thunkable Live and the web preview: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/e/4e61857d5b3ef0605a2bd49f9da3a76be968dfac.png) ![layoutbug](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/d/6d1ed6efb6d45fd2bf775a5bb1089f7e3c3d7fae.jpeg) For both, you can see (different but wrong) extra height added to the image. Is there a better way to do this? How are others getting responsive design if setting height to a relative amount breaks the way the image displays? I thought maybe I could solve my problem with the drag and drop interface, but I don’t even see a way to make an image set to the screen width, so I guess not? ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [March 23, 2021, 4:13pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505/7 "2021-03-23T16:13:57Z")
I don’t know how helpful I can be but what does the original image look like that you’re using? Are you able to share a link to the project? I’m curious what background picture resize mode(s) you’re trying. ---
**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\ **Post date:** [March 23, 2021, 6:18pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505/8 "2021-03-23T18:18:21Z")
[https://x.thunkable.com/projectPage/605a2f021a0f0500115dce26](https://x.thunkable.com/projectPage/605a2f021a0f0500115dce26) ^^ simplest project ever, but it shows the problem. Picture resize mode on the image is set to ‘contain’. There’s no background picture resize mode set on the screen, because there’s no background picture. That image is 2048 x 416 pixels originally. When the width gets resized to fit my 320 pixel screen, somehow the height ends up wrong… ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [March 23, 2021, 8:36pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505/9 "2021-03-23T20:36:14Z")
Correct me if my math is wrong but if you take an image that is 2048 x 416 and shrink the width (2048) to 320, the height should be 65. I set your image to absolute size at 65 height and 320 width and it looks like this, not too different from what you’re seeing when it’s auto-sized: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/a/da9afc270fcc571db371e5cab8ad7e6409b19841.jpeg) ---
**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\ **Post date:** [March 23, 2021, 8:56pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505/10 "2021-03-23T20:56:27Z")
When it’s auto sized there’s a big space at the top and bottom. ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [March 23, 2021, 9:53pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505/11 "2021-03-23T21:53:41Z")
Okay, so you’re talking about the spacing being wrong, not the sizing. The image, as far as I can tell, has the correct proportions on the screen. But the margins above and below are what you’re noticing are wrong. ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [March 23, 2021, 10:12pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505/12 "2021-03-23T22:12:49Z")
When I set the image you used to absolute sizes, as I mentioned, it is aligned at the top of the screen, as I’d expect: [https://x.thunkable.com/copy/e9bc8f9d000b92820b0327766c17534f](https://x.thunkable.com/copy/e9bc8f9d000b92820b0327766c17534f) ![Screen Shot 2021-03-23 at 2.55.57 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/7/37a28650bccb83081f293bb5736d29fd6b1692a5.png) The black lines are there because it has a border or 1 pixel but if I remove that, they disappear. ---
**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\ **Post date:** [March 23, 2021, 11:47pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505/13 "2021-03-23T23:47:17Z")
Right. But I’d have expected that “for contents” for height would have the same effect. Having to set absolute sizes is a drag for a ton of images, and makes responsive design harder. ---
**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\ **Post date:** [March 24, 2021, 12:09pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505/14 "2021-03-24T12:09:31Z")
Is there a way in Thunkable to get the image dimensions, so that I can set absolute height or otherwise handle the resize myself? I hoped that I could pull it out of the image height and width blocks, but nope, that’s wrong (which is why all that extra space is appearing, I guess). ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/6/766d44b247416e893fcbcdf621ed96a2d3ec50e2.png) ---
**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, 1:26pm UTC](https://community.thunkable.com/t/layout-help-added-space-when-changing-images/1170505/15 "2024-11-08T13:26:00Z")