How to set image height to width percentage

Questions about Thunkable
1

Hello !

I’m using thunkable cross platform.

I would like to set an image height to be the same as the current image width, that is set in percentage.
My issue is that is I set the image width and height to be 20%, the image won’t be square since 20% of the container’s width is not equal to 20% of the container’s height.
I don’t want to use absolute scaling since I want the width to change according to the width of the screen.

Any idea about how to proceed ?

Thanks

2

I don’t believe this is currently possible. I tried getting the height of a 20% tall box to see if it might return an absolute height (that we could then assign to width), but it also pulls a percentage.

3

Hello,

You can try to display an image in the Web Viewer using JavaScript.

4

I could do that but Thinkable is about about making aps without worrying about coding anything… I would have used phonegap if I wanted to take care of JS and HTML.

I managed to do something, by putting the aspect ratio to 1 (in advanced options) and by specifying a relative width and leaving the height blank. It seems to work but isn’t very intuitive…

5

When in Thunkable X there is an exchange of data between the Web Viewer and the native part, then, perhaps, you change your mind. Even App Inventror + Javascript is much more functional and more powerful than Phonegap.

Thunkable X appeared quite recently and many things really have to be done intuitively and apply different tricks.

6

What can you do in MIT app inventor that you can’t do with HTML/CSS/JS ?

I didn’t realize that Thunkable X was this new, they should consider adding an option to be able to get the absolute width of a component (instead of returning “20%”), this should be really helpfull for new people that doesn’t know HTML/JS (because that’s what thunkable is meant for).

7

In App Inventor, I can work with native device functionality, use Java in extensions, create Android API objects and methods, etc., which can not be done with HTML/CSS/JS.

You’re right,. I was also very surprised that the blocks in Thunkable X do not return the current values ​​of the properties.

8

I believe that Cordova allows you to work with native functionality but can sometimes be a bit tricky to manipulate…
I didn’t know you could go this far with appinventor, thanks for the info !

9

Hi
In the advanced tab, if you set one of the dimensions in % and leave the other blank (e.g. set width to 20% and leave height blank), it will automatically set the other dimension to the same value.
So if you set width to 20% and leave height blank, both sides of the image will be 20% of the width of the container the image is in. On the other hand, if you set the height to 20% and leave the width blank, both sides of the image will be 20% of the height of the container.
You can also put constraints on it like minimal/maximal width/height.
There also is a parameter aspect ratio, which I assume can be used to specify the ratio between width and height (e.g to make the width half the height, but that doesn’t seem to work at present)

Regards Rob

10

Set any height and width percent but use “contain” for the picture. Then you picture will stay square forever.
Hayder

11

I see a problem with the buttons on the hidden Column. Do you want to do this - cover all the buttons in Column with an opaque Column with absolute positioning?