Automatic Resize of Image and Text inside a Button in Perspective

Ignition
,
1

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
Button_Configuration1376×927 67.4 KB

Shrink_Pump
Shrink_Pump912×933 16.9 KB

2

For the text, use CSS calc() for this. Put it in the textStyle of the label as fonSize.

calc(0.25*(1vh + 1vw))

vh = view Height
vw = view Width

I'm not sure if this will work on the image though.

3

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 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.

4

Take a look at this thread. There's some good stuff in there - specifically NMinchin's posts about text sizing
Useful CSS Stuff

5

tl;dr: Useful CSS Stuff - #34 by nminchin

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

6

I'm using REM all the way into embedded views. Seems to work fine for me..

7

If you resize the embedded view though, the font won't resize

8

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.