# Automatic Resize of Image and Text inside a Button in Perspective **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [May 3, 2023, 1:42pm UTC](https://forum.inductiveautomation.com/t/automatic-resize-of-image-and-text-inside-a-button-in-perspective/73200 "2023-05-03T13:42:34Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![Sergio\_Alonso](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@Sergio\_Alonso](https://forum.inductiveautomation.com/u/Sergio_Alonso)\ **Post date:** [May 3, 2023, 1:42pm UTC](https://forum.inductiveautomation.com/t/automatic-resize-of-image-and-text-inside-a-button-in-perspective/73200/1 "2023-05-03T13:42:34Z")
I have a button in perspective which contains a text and an image. The problem is that when I resize the emebedded view, the button itself shrinks but the image and the text do not shrink. I attach an screenshot of the configuration for the button ![Button_Configuration](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/7/174c65a86ddc1024cc655a24025672ab319168a1.png) ![Shrink_Pump](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/4/f4c1d8e1f605c4a1c1f0c72d2a6d1208021de5ee.png) ---
**Author:** ![kyler.kamyszek](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@kyler.kamyszek](https://forum.inductiveautomation.com/u/kyler.kamyszek)\ **Post date:** [May 4, 2023, 3:01pm UTC](https://forum.inductiveautomation.com/t/automatic-resize-of-image-and-text-inside-a-button-in-perspective/73200/2 "2023-05-04T15:01:28Z")
For the text, use CSS calc() for this. Put it in the textStyle of the label as fonSize. > **[A Couple of Use Cases for Calc() | CSS-Tricks](https://css-tricks.com/a-couple-of-use-cases-for-calc/)** > > calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math ```auto calc(0.25*(1vh + 1vw)) ``` vh = view Height vw = view Width I'm not sure if this will work on the image though. ---
**Author:** ![Xander\_Dawson-Fink](https://avatars.discourse-cdn.com/v4/letter/x/73ab20/32.png) [@Xander\_Dawson-Fink](https://forum.inductiveautomation.com/u/Xander_Dawson-Fink)\ **Post date:** [May 19, 2025, 1:11pm UTC](https://forum.inductiveautomation.com/t/automatic-resize-of-image-and-text-inside-a-button-in-perspective/73200/3 "2025-05-19T13:11:55Z")
So, how I do text is fairly straight forward. The root container is a certain width and height, and the text at a certain pixel size looks good. Then, calculate the current pixel height in view units; 1vw = 1% of view width, 1vh = 1% of view height, vmin and vmax are the minimum or maximum of the 2 calculations. You'll end up with 2 numbers, just plug those into a min function and you're good. It'll look something like `min(1.4656vw, 2.0333vh)`. I've got a [desmos calculator](https://www.desmos.com/calculator/3sptrt3n9f) to make it easy, too. As for the image, delete the image width and height properties and add them under `image.style`. You can then use percentages. ---
**Author:** ![tgarrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tgarrison/32/80965_2.png) [@tgarrison](https://forum.inductiveautomation.com/u/tgarrison)\ **Post date:** [May 20, 2025, 12:25pm UTC](https://forum.inductiveautomation.com/t/automatic-resize-of-image-and-text-inside-a-button-in-perspective/73200/4 "2025-05-20T12:25:08Z")
Take a look at this thread. There's some good stuff in there - specifically NMinchin's posts about text sizing [Useful CSS Stuff](https://forum.inductiveautomation.com/t/useful-css-stuff/95414) ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [May 20, 2025, 12:43pm UTC](https://forum.inductiveautomation.com/t/automatic-resize-of-image-and-text-inside-a-button-in-perspective/73200/5 "2025-05-20T12:43:44Z")
tl;dr: [Useful CSS Stuff - #34 by nminchin](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/34) Actually, having read the OP, `rem` units which I suggest won't work here as it's got nothing to do with the viewport changing size; it's the embedded view that's changing size and thus the rem size won't be affected. I don't ever do this so I haven't had to hurdle it before ---
**Author:** ![tgarrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tgarrison/32/80965_2.png) [@tgarrison](https://forum.inductiveautomation.com/u/tgarrison)\ **Post date:** [May 20, 2025, 2:51pm UTC](https://forum.inductiveautomation.com/t/automatic-resize-of-image-and-text-inside-a-button-in-perspective/73200/6 "2025-05-20T14:51:32Z")
I'm using REM all the way into embedded views. Seems to work fine for me.. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [May 20, 2025, 3:03pm UTC](https://forum.inductiveautomation.com/t/automatic-resize-of-image-and-text-inside-a-button-in-perspective/73200/7 "2025-05-20T15:03:17Z")
If you resize the embedded view though, the font won't resize ---
**Author:** ![tgarrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tgarrison/32/80965_2.png) [@tgarrison](https://forum.inductiveautomation.com/u/tgarrison)\ **Post date:** [May 20, 2025, 3:30pm UTC](https://forum.inductiveautomation.com/t/automatic-resize-of-image-and-text-inside-a-button-in-perspective/73200/8 "2025-05-20T15:30:01Z")
Oh. gotcha. Missed that he WANTED the font to resize with the embedded view size. Same techniques though should be relevant. Just need to find the proper CSS calls. Probably just reading the height and/or width of the embedded view. Make the fontSize on the root of the embedded view dynamic to the width/height of the embedded view. Then either reference that fontSize directly, or use em instead of rem. ---
**Author:** ![luis](https://avatars.discourse-cdn.com/v4/letter/l/3e96dc/32.png) [@luis](https://forum.inductiveautomation.com/u/luis)\ **Post date:** [June 19, 2025, 12:20am UTC](https://forum.inductiveautomation.com/t/automatic-resize-of-image-and-text-inside-a-button-in-perspective/73200/9 "2025-06-19T00:20:42Z")
Did anyone find a way to do this? ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [June 19, 2025, 6:06am UTC](https://forum.inductiveautomation.com/t/automatic-resize-of-image-and-text-inside-a-button-in-perspective/73200/10 "2025-06-19T06:06:55Z")
The biggest issue with actually doing this is that you will end up with a vast number of different font sizes throughout your project which will look unprofessional. I would recommend you avoid trying to do this and instead look to rem units and media queries to set the root HTML font-size based on screen size (as in my linked post above)