Fill, Fit, Stretch: three ways to hit a frame

Fill (default)

Fill scales the photo until the target rectangle is completely covered, then crops the overflow from the center. It is the same math as CSS background-size: cover. A wide photo into a square loses left and right. A tall photo into a square loses top and bottom. Use Fill for Instagram squares, YouTube thumbs, and any place the platform will crop you anyway. The preview’s rule-of-thirds overlay is there so you can see whether a face survives the crop before you commit.

Fit (contain + pad)

Fit scales the photo until it is fully visible inside the rectangle. Leftover bands are filled with black or white. Nothing is cropped. The result may look like a letterboxed film still. Use Fit for product shots, diagrams, screenshots with UI chrome you cannot lose, and any legal or medical image where cropping would change meaning. Padding is honest: you see the empty space instead of discovering it after upload.

Stretch

Stretch maps every source pixel onto the target grid. If the ratios match, you will not notice. If they do not, circles become ovals. Use Stretch only when you already accept distortion, or when the source is already the same ratio and you just need a different pixel count. It is the least common choice. It exists because some banners and email headers were designed to be slammed into a slot.

Worked example

Source 2000×1000 (2:1). Target IG Post 1080×1080 (1:1). Fill draws a 1080×1080 crop from the center of the scaled image — you keep the middle 1000 pixels of width after scale, not the full panorama. Fit draws the whole 2:1 photo inside the square with pads above and below (or you switch pad color). Stretch produces 1080×1080 with people twice as tall as they were. Fit the product (this site) will label an enlarge as Upscaled if you asked for more pixels than you had. Downscales do not get that badge.

What Canvas actually does

After the crop rectangle is known, Fit draws with Canvas 2D and encodes with toBlob. That is a resample, not a lossless JPEG recrop. Fine text can soften. If you only needed to trim pixels without a resample, a dedicated lossless cropper would be a different tool. Fit’s contract is “this width, this height, this mode.” Quality 0.92 is the default encode for JPG/WebP after that draw.

Next: the full how-to or resize a file now.