Fill Box (Cover)

Scale and crop images to completely fill exact dimensions with no empty space—equivalent to CSS object-fit: cover behavior. Unlike "contain" fitting which may leave empty space, "cover" ensures every pixel of your target area is filled with image content, cropping any excess that extends beyond the bounds. The result is perfectly-sized images that fill their containers completely.

The algorithm scales the image so its smaller dimension matches the corresponding target dimension, then crops the overflow from the larger dimension. For a landscape image fitting a square target, the image scales until its height matches the target height, then the sides are cropped. You control where the crop centers: default center-crop preserves the middle of the image, but you can shift the focal point to protect faces, products, or other important areas from being cropped away. The preview shows exactly what will be preserved before you commit.

E-commerce developers creating product grid thumbnails produce uniform image sizes from varied product photography—whether the source is portrait, landscape, or square, the grid displays consistent dimensions. Hero banner designers filling full-width sections with background images achieve edge-to-edge coverage at specified heights. Social media managers meeting exact platform dimensions for posts and ads generate correctly-sized content from arbitrary source images. Card-based UI developers ensuring visual consistency across card grids normalize images from varied sources. Magazine and catalog designers filling fixed-dimension image wells with photography maintain layout precision. Anyone building layouts that require exact image dimensions without letterboxing or pillarboxing will find cover-crop fitting essential.