Most of your image size and placement settings can be adjusted with just your mouse using the image border scaling options or by dragging-and-dropping the image's placement.
You can also manually set the image size and location under the "Size & Position" tab located in the right toolbar when selecting the image.
Note: The term "image field" referenced through this article refers to the image container and it's associated height and width and not the original uploaded image itself or that image's associated height or width.
Showit provides 3 primary ways to define how an image may respond inside the image field through the "Fill", "Contain", and "Scale" options. Under the "Image" tab, with an image selected, in the properties panel, you will see a size option with a drop-down menu.
Image Setting - Fill
The 'Fill' option will force the image to fill all the way to the set height and width dimensions of the image field. This may result in some cropping of the image if the image area and the original image itself are not in equal ratio.
Depending on the horizontal or vertical orientation of the image field, the 'position' setting will allow you to set how the image is positioned inside the image field.
Image Setting - Contain
The 'Contain' setting will preserve the original image's dimensions inside the image field.
With the image field being set to "Contain", this will allow you to adjust the height and width of the image area without altering the original image's dimensions. The original image will scale with whichever edge is shortest relative to the image.
Image Settings - Scale
The scale setting allows for adjusting the focal point of the image inside the image element container. To edit this, increase the percent to be over 100%. This will then allow you to edit the horizontal and vertical placement of the image inside the space
Scaling Images for Larger Displays
If you are trying to make sure that your images will scale with lager sized displays, you can use the Stretch Edge Locking feature. Setting this on an image will allow the image borders to lock to the edge of the display, no matter how large the display is. Edge Locking only works for images placed on a canvas, not for canvas background images.
You can read more about how to use Edge Locking in this article here:
Image Settings - Background
For a canvas background image, it is important to remember that the editor is 1200 pixels wide, while most computer screens are much wider. A Background Image is responsive to the width of any given browser and will stretch relative to the width of the screen. The height of the canvas containing the background image, however, will remain the same height (unless you have set your Canvas to "Window Height" in the "Canvas" tab on the right).
Even if it appears that the image fits well in the Showit app, anticipate some image changes with how the image may be viewed on different screen or browser sizes. If you find the image is cropping too much from the top or bottom edge on larger screens, increasing the height of the Canvas can be the solution as it will allow a higher responsive ratio for the image dimensions.