URL of experiment: https://run.pavlovia.org/kmccarty/mol-online/html
Description of the problem:
I have a series of portrait images of bodies in a sequence where participants use a slider to move through the image sequence.
The size of each .png is 576x1024. I want to be able to rescale these images for different size screens whilst maintaining their aspect ratio. Using the advice of the forum I have turned to using height units.
I want to display the images using a size that takes up around .8 of the height of the screen, but maintains the image’s aspect ratio. In Builder I can input one value in size, but of course that affects both dimensions (i.e. the image becomes stretched).
In Python I was able to create an ImageStim, assign an image to it, read the size of it in height units using ImageStim.size, and rescale it to take up .8 of the height of the screen, but automatically assign the corresponding width to maintain the ratio using:
resizedWidth = (newHeight / oldHeight) * oldWidth
However, when I used that method online I discovered that even if you assign an image to an ImageStim and then read its .size attribute, it returns ‘undefined’.
I may be approaching this all wrong, but is there a way to rescale images dependent on the screen whilst maintaining their aspect ratio?