Image Demo Keep Constant Height
Jaap MurreShow image in a block with height at 100% of the block's height, with variable width. Suitable for showing images of printed words of varying width.
Copy the function fixedheight() and place at the beginning of your script. You can then use it as is shown in the example. Make sure to call it before showing it for each individual image as each image has its own image node that needs to be restyled.
If you are a registered user and signed in, you can here copy this script and its stimuli to your own account, where you can edit it and change it in any way you want.
It is absolutely free to register (no credit card info asked!). You can then instantly copy this experiment with one click and edit it, change its accompanying texts, its landing page, stimuli, etc. Invite your colleagues, friends, or students to check out your experiment. There is no limit on how many people can do your experiment, even with a free account.
The catch? There is no catch! Just keep in mind that with a free account, you cannot collect data. For teaching that is usually not a problem. For research, prepaid data collection (unlimited subjects) starts as low as €10.00 for a 10-day period.
/*
Show image in a block with height at 100% of the block's height,
with variable width. Suitable for showing images of printed words
of varying width or to keep images contained within a block
image_name (string): The name of the image with extension, e.g., cat.jpg
block (Block object, optional): The Block object where you want to show
the image. Default is the main.centerblock.
Example:
b.preload("cat_200.jpg");
b.preload("cat_400.jpg");
image.await("preloading_completed");
fixedheight("cat_400.jpg",b);
b.setimage("cat_400.jpg");
fixedheight("cat_200.jpg",b); // You have to call the function for each image!
b.setimage("cat_200.jpg");
*/
function fixedheight(image_name,blk)
{
blk = blk || main.centerblock;
var n = blk.getimagenode(image_name);
n.style["height"] = "100%";
n.style["width"] = "auto";
n.parentNode.style["height"] = "100%";
}
var b = addblock("center",0,100,20,"yellow");
b.preload("cat_200.jpg");
b.preload("cat_400.jpg");
image.await("preloading_completed");
text("Without fixed height
(press space to continue)");
awaitkey(' ');
clear();
b.setimage("cat_200.jpg");
awaitkey(' ');
b.setimage("cat_400.jpg");
awaitkey(' ');
b.clear();
text("With fixed height
(press space to continue)");
awaitkey(' ');
clear();
fixedheight("cat_400.jpg",b);
b.setimage("cat_400.jpg");
awaitkey(' ');
fixedheight("cat_200.jpg",b); // You have to call the function for each image!
b.setimage("cat_200.jpg");
awaitkey(' ');
cat_200.jpg
cat_400.jpg