How to set image height to width percentage

Thunkable Discuss
#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?