Fit pictures of different size to selector

PennController for IBEX Forums Support Fit pictures of different size to selector

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #9892


    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.pngdemo pic). 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 ( Thank you so much for your help in advance!


    Sorry the demo image link above did not work. Here it is again:



    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"})),


Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.