7 Image Hotspot Size

From the Kitchen Mattermost Community:

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.

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.

Big Image:

Small Image

No 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.

Here is another try where I added some extra white margins to the original image to force it to be much wider than the original.

It achieves the effect, but might look a bit off kilter. Using the color of the H5P in the “gutter” might be more appealing?