Fit pictures of different size to selector

[cheny39]

Greetings!

I ran into some difficulties while trying to implement a 2AFC picture selection task. The challenge is that any one of the pictures could either be in landscape or portrait orientation. What I want to achieve is to have a constant size selector on the left or right side of the screen, but let the portrait be contained in the selector (see demo.png). I attempted to achieve this with CSS – adding a {object-fit: contain} on the image, but it does not seem to have any effect. So any feedback will be appreciated. Here’s the demo link (https://upenn.pcibex.net/r/oNNvMj/). Thank you so much for your help in advance!

[cheny39]

Sorry the demo image link above did not work. Here it is again: https://drive.google.com/drive/u/0/folders/1a8YX0dLLY9evuuqqVwlL9h6rHBbIAbAh

[Jeremy]

Hi,

I answered this question via email, but I’m posting the answer here too for other users

The simplest solution in this case is to simply set a max-height and max-width on the Image elements to the same dimensions of the containing Canvas elements:

newCanvas("left", 500, 290)
    .add(  "center at 50%" , "middle at 50%" , getImage("target").css({"max-height":"290px", "max-width":"500px"})),

newCanvas("right",500, 290)
    .add(  "center at 50%" , "middle at 50%" , getImage("foil").css({"max-height":"290px", "max-width":"500px"})),

Jeremy

[Author]

Posts