# 9-slice scaling UMG image **URL:** \ **Category:** UI\ **Tags:** unreal-engine\ **Created:** [March 6, 2019, 8:56pm UTC](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231 "2019-03-06T20:56:34Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Detilium](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/detilium/32/985007_2.png) [@Detilium](https://forums.unrealengine.com/u/Detilium)\ **Post date:** [March 6, 2019, 8:56pm UTC](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231/1 "2019-03-06T20:56:34Z")
I just recently discovered the 9-slice scaling feature in UE4, but I can’t seem to wrap my head around how to calculate the margins. For instance, take this simple image: ![Button_DefaultHovered.png](https://d3kjluh73b9h9o.cloudfront.net/original/3X/b/a/bac5f1be48d89829d7e8258c5935cf27f1abb9bb.png) This image is originally 256x256. This image will be used as it is (1:1) but I intend to use this image for buttons as well. This is where the 9-slice scaling comes in handy. I want to button to look something like this: ![Tmp.png](https://d3kjluh73b9h9o.cloudfront.net/original/3X/9/0/90edd59e394e75c63e9f6a0b00cd9069dbb45977.png) I tried messing around with the margins in UE4, but I can’t seem to get it right. The documentation isn’t much of a help either, but I suppose that just because I might not understand 9-slice scaling properly. I would appreciate some more detailed explanation on how I know what my margins should be? ---
**Author:** ![OptimisticMonkey](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/optimisticmonkey/32/906571_2.png) [@OptimisticMonkey](https://forums.unrealengine.com/u/OptimisticMonkey)\ **Post date:** [March 6, 2019, 11:02pm UTC](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231/2 "2019-03-06T23:02:24Z")
afaik - 1,3,7,9 dont scale, so slice close to white ends (sorry for sloppy lines - using mouse as pen) ---
**Author:** ![Detilium](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/detilium/32/985007_2.png) [@Detilium](https://forums.unrealengine.com/u/Detilium)\ **Post date:** [March 7, 2019, 6:19pm UTC](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231/3 "2019-03-07T18:19:55Z")
Yes, I do get that much about 9-slice scaling. The issue however, is how I know what percentage to use for the margins? I’ve fiddled around with the margins for quite a bit, but nothing really seems to work that well. ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [March 7, 2019, 7:41pm UTC](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231/4 "2019-03-07T19:41:09Z")
The margins are percentage, as you said. For the image you posted, you’d have to keep margins at 0.4 or 0.35 - eyeballing it here, you may get away with 0.3 A margin 0.4 for an image 100x100 pixels would mean that when you stretch the image, only the 20 pixels in the middle will be stretched. The 40% from all sides will just stick to the edges. To get a good result, it’s always better to produce a base image that will never be scaled down, only up - basically make the smallest you will need and 9-slice that. Yours looks spot on. edit: pixel size is weird because of how lazily I copypasta this 😑 ![Untitled.png](https://d3kjluh73b9h9o.cloudfront.net/original/3X/c/c/cccc79b597427374e6816433c35b0f4cc3a7d706.png) 51 is 25% of 204. Your margins should be 0.25 or more. The text cannot be a part of the image, of course. ---
**Author:** ![BDC\_Patrick](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/bdc_patrick/32/1104221_2.png) [@BDC\_Patrick](https://forums.unrealengine.com/u/BDC_Patrick)\ **Post date:** [March 7, 2019, 8:12pm UTC](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231/5 "2019-03-07T20:12:28Z")
calculation is: (1.0 / ImageWidth) \* BorderWidth (1.0 / ImageHeight) \* BorderHeight this results in thw percentage values for the slices 1,3,7,9 - from 0.0 to 1.0 The Slices 2,4,5,6 and 8 are resulting slices based on the corners, and only stretched and not tiled! ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [March 7, 2019, 8:26pm UTC](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231/6 "2019-03-07T20:26:19Z")
> [@](#): > > and only stretched and not tiled! There’s \*border \*Draw As mode where the sides tile, too. ---
**Author:** ![Detilium](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/detilium/32/985007_2.png) [@Detilium](https://forums.unrealengine.com/u/Detilium)\ **Post date:** [March 7, 2019, 8:50pm UTC](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231/7 "2019-03-07T20:50:45Z")
Yes, I would expect 30-40% margins, but still the image looks as below ![stretch.png](https://d3kjluh73b9h9o.cloudfront.net/original/3X/9/6/964c06d8027593e7148b64194c90fb87b433c591.png) ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [March 7, 2019, 8:59pm UTC](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231/8 "2019-03-07T20:59:33Z")
Can you show a screenshot of the details panel? Looks spot on on my end: ![Capture.PNG](https://d3kjluh73b9h9o.cloudfront.net/original/3X/f/0/f0bd6acf20e805b8b55e7995f67a792bddeaab1c.png) ---
**Author:** ![Detilium](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/detilium/32/985007_2.png) [@Detilium](https://forums.unrealengine.com/u/Detilium)\ **Post date:** [March 7, 2019, 9:08pm UTC](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231/9 "2019-03-07T21:08:48Z")
Sure. ![btn.PNG](https://d3kjluh73b9h9o.cloudfront.net/original/3X/c/b/cb474809596a7cb3279fc718179ea73af7f74c81.png) ---
**Author:** ![Detilium](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/detilium/32/985007_2.png) [@Detilium](https://forums.unrealengine.com/u/Detilium)\ **Post date:** [March 7, 2019, 9:11pm UTC](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231/10 "2019-03-07T21:11:38Z")
Aaaaah. It’s because the image is to big. If I scale up the image within the engine, everything looks good, but since I only need the image to have a certain size, It messes with the scaling. Scaling up the image looks like below, but as you can see, it’s way to big for my button. I suppose I should scale down the image before importing. ![tn2.PNG](https://d3kjluh73b9h9o.cloudfront.net/original/3X/6/1/6195a6f4a24050bc6a47bf38052170b44dfa8e3c.png) ---
**Author:** ![Everynone](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/everynone/32/1135017_2.png) [@Everynone](https://forums.unrealengine.com/u/Everynone)\ **Post date:** [March 7, 2019, 9:21pm UTC](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231/11 "2019-03-07T21:21:36Z")
Yup, make the original image the smallest version you will ever need. ---
**Author:** ![DryreL](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/dryrel/32/1042339_2.png) [@DryreL](https://forums.unrealengine.com/u/DryreL)\ **Post date:** [November 3, 2022, 9:28pm UTC](https://forums.unrealengine.com/t/9-slice-scaling-umg-image/123231/12 "2022-11-03T21:28:53Z")
Thanks, this post helped!