Container Image Fit and Position Options

In dominKnow|ONE when using a background image within a container, there are a number of fit and position options you can choose from. By default, images use the Natural fit option, with the top middle position. By changing some options, you can change the way an image reacts within the container. Here are all the details you will need to be able to choose the correct image options for your project.

Natural

When this option is selected, the image will keep its original size within the container without stretching or squishing the image. If the image is bigger than the assigned container, the image will overflow on the largest side without stretching. If the image is smaller than the assigned container the image will naturally fit within the container and will overflow on the largest side if needed.

Uses: This setting is used best when a specific image size is required.

Fit

When this option is selected, the image will resize to fit within the container without stretching, squishing or overflowing over the sides. When the image is resized, it will shrink or enlarge to fit fully within the container and will be fully visible.

Uses: This setting is used best for important images that hold information that should not be cut off, and generic image graphics (like icons).

Cover

When this option is selected, the image will cover the container fully. The image will stretch if it’s smaller than the container, or overflow over the largest side if the image is bigger than the container.

Uses: This setting is used best for banners, title pages, background images, and image dividers.

Stretch

When this option is selected, the image will stretch or squish itself to fit fully within the container without overflowing. If the image is bigger than the container, the image will squish to fill the container. If the image is smaller than the container the image will stretch at each corner to fill the container. The image won’t overflow, and the original aspect ratio is ignored. This setting tends to make the image look distorted.

Uses: This setting is used best for simple, textured, and abstract background images that do not include people, text or buildings. since this setting tends to distort the image, it’s best to use an image where you won’t notice the distortion.

Position

When you have an image uploaded to a container you can change where the image is pinned within that container. A photo is set to top middle by default. A photo can be pinned to: Top right, top middle, top left, right top, right middle, right bottom, bottom right, bottom middle, bottom left, left bottom, left middle, left top, or center within the container.

The image will be resized/moved based off of the pinned point.

For example: If you want to add an image but the main part that should be shown is near the bottom you would pin the image to one of the bottom pins, this way the proper section of the image is shown.