When adding images to your Abyssale designs, you often need to decide how the image should fit inside its defined box (the container).
You can control this using the Image Fit setting in the right-side panel. There are two main modes: Contain and Cover.
Contain Mode
The Contain mode will resize an image to fit within the bounds of its container with no cropping.
When you select Contain, Abyssale ensures that your entire image is visible within the container.
How it works: The image scales down until it fits perfectly inside the box without being cut off.
The Result: If the aspect ratio of your image is different from the container, you will see empty space (transparent areas) on the sides or top/bottom.
Best for: Logos, icons, or product photos where you cannot afford to cut off any part of the image.
Cover Mode
The Cover mode will resize an image to fill the entire container, which may crop parts of the image if the aspect ratios differ.
When you select Cover, Abyssale ensures the image fills the entire container, leaving no empty space.
How it works: The image scales up to cover the entire background of the box.
The Result: Parts of the image may be cut off (cropped) if the image's aspect ratio differs from the container.
Best for: Background photos, textures, or portraits where filling the shape is more important than showing the full edge-to-edge image.
Fine-Tuning Image Alignment (Cover Mode)
If you use Cover mode, the automatic centering might cut off an important part of your photo (like a person's face). You have two ways to adjust this: using the Properties Panel for precision or the Canvas for visual control.
Method 1: Using the Properties Panel (Precision)
In the right-side panel, look for the Image Alignment section. These sliders give you exact control over the image placement:
Use simple grid system : You can anchor your content to 9 specific points within the bounding box.
Horizontal Alignment: Left, Center, or Right.
Vertical Alignment: Top, Middle, or Bottom.
Zoom: Manually scale the image up to focus on a detail.
Offset X / Y: Move the image horizontally or vertically within the container to shift the focus.
Method 2: On-Canvas Adjustment (Visual)
You can also adjust the image directly on the canvas, which automatically updates the slider values mentioned above.
Make sure your image is set to Cover.
Double-click directly on the image element in the canvas.
You will see the full outline of the image appear (often extending outside the blue bounding box).
Click and Drag the image to reposition it exactly where you want it.
Click anywhere outside the image to finish.
Note: This action only changes how the image looks inside the container; it does not change the size of the container itself. These manual adjustments will be applied to any image generated in this layer.