Skip to main content

Image Fit Modes: Contain vs. Cover

Learn the difference between image fit modes and how to crop or reposition images using Cover mode.

Updated over 2 weeks ago

When adding images to your Abyssale templates, 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.


Pro Tip: Repositioning & Cropping (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 can manually adjust this directly on the canvas.

How to custom crop your image:

  1. Make sure your image is set to Cover.

  2. Double-click directly on the image element in the canvas.

  3. You will see the full outline of the image appear.

    • Drag the image to move it around inside the container.

    • Resize the image using the corner handles to zoom in or out.

This feature allows you to "crop" the image exactly how you want it, without needing external editing tools.

This action only changes how the image looks inside the container; it does not change the size of the container itself.

Did this answer your question?