{"id":50,"date":"2020-10-05T14:05:48","date_gmt":"2020-10-05T18:05:48","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/?post_type=chapter&p=50"},"modified":"2020-10-06T11:45:37","modified_gmt":"2020-10-06T15:45:37","slug":"image-hotspot-size","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/h5pkitchen\/chapter\/image-hotspot-size\/","title":{"raw":"Image Hotspot Size","rendered":"Image Hotspot Size"},"content":{"raw":"From the Kitchen Mattermost Community:\r\n
I have a couple of image hotspots and the images in the textbook require scrolling. Is there a way that I can make the picture smaller in H5P so that it can all appear on the screen at once? I know they can click on it to make it pop out, but the rest of the team would like it smaller in the textbook.<\/blockquote>\r\nMy hunch is that the images are scaled to size responsively, so they fill the space available. But just to be sure, I made an Image Hotspot with an image that was 1920x1280 in size and a second version where the image was made smaller, 640x480.\r\n

Big Image:<\/h2>\r\n[h5p id=\"6\"]\r\n

Small Image<\/h2>\r\n[h5p id=\"7\"]\r\n\r\nNo difference! So the images are sized to fill the space available by scaling the width 100%, the height then is just done in proportion. So an image less square or with a higher width to length ratio, will occupy less vertical room on a page, the bottom one will take up less vertical room than the top.\r\n\r\n\"\"\r\n\r\nHere is another try where I added some extra white margins to the original image to force it to be much wider than the original.\r\n\r\n[h5p id=\"8\"]\r\n\r\nIt achieves the effect, but might look a bit off kilter. Using the color of the H5P in the \"gutter\" might be more appealing?\r\n\r\n[h5p id=\"9\"]\r\n\r\n ","rendered":"

From the Kitchen Mattermost Community:<\/p>\n

I have a couple of image hotspots and the images in the textbook require scrolling. Is there a way that I can make the picture smaller in H5P so that it can all appear on the screen at once? I know they can click on it to make it pop out, but the rest of the team would like it smaller in the textbook.<\/p><\/blockquote>\n

My hunch is that the images are scaled to size responsively, so they fill the space available. But just to be sure, I made an Image Hotspot with an image that was 1920×1280 in size and a second version where the image was made smaller, 640×480.<\/p>\n

Big Image:<\/h2>\n
\n