Overview
Introduction
This tool fits a PNG image inside a fixed-size rectangle without cropping or distorting it, the same way the CSS object-fit: contain property works for images on a web page.
It's useful whenever you need an asset that's guaranteed to be exactly a certain width and height, regardless of its original aspect ratio.
What Is PNG Rectangle Fitter?
A client-side PNG resizer that computes the largest uniform scale factor that keeps an image's full content within a target width and height, resizes to that scale, and centers the result on a transparent canvas of exactly the requested size.
It reuses the same nearest-neighbor resampling helper as the rest of the PNG tools for the scaling step.
How PNG Rectangle Fitter Works
The tool compares the ratio of target-width-to-source-width against target-height-to-source-height and picks the smaller of the two as the scale factor, guaranteeing the scaled image never exceeds either target dimension.
After resizing, it places the scaled image centered on a new transparent canvas sized exactly to the target rectangle, so the output dimensions are always exactly what you asked for.
When To Use PNG Rectangle Fitter
Use it to prepare thumbnails, avatar frames, or ad-slot assets that must be an exact pixel size regardless of the source image's aspect ratio.
It's also useful for normalizing a batch of differently-shaped images into one consistent canvas size before further processing.
Often used alongside PNG Border Adder and PNG Duplicator.
Features
Advantages
- Runs entirely client-side; the uploaded image is never sent to a server.
- Never distorts the aspect ratio, unlike a naive stretch-to-fit resize.
- Output dimensions are always exactly the requested rectangle size, simplifying downstream layout.
Limitations
- Scaling uses nearest-neighbor resampling, which can look blocky when scaling up significantly.
- If the aspect ratios differ, transparent padding is added; this tool doesn't crop to fill the box edge-to-edge (that's a different operation, sometimes called object-fit: cover).
Examples
Best Practices & Notes
Best Practices
- Use this tool before compositing several differently-sized source images into one consistent layout.
- If you need the box filled edge-to-edge with no padding, crop the source to the target aspect ratio first.
Developer Notes
The lib function is a pure wrapper around the shared resizeNearest helper: it computes the min(targetWidth/width, targetHeight/height) scale factor, calls resizeNearest, then copies the scaled buffer into a larger transparent PixelBuffer at a centered offset — no DOM access until the component encodes the result to a canvas.
PNG Rectangle Fitter Use Cases
- Normalizing product photos to a uniform thumbnail size
- Preparing an ad creative that must exactly match a fixed ad-slot size
- Building a consistent avatar frame from arbitrarily-shaped source photos
Common Mistakes
- Expecting the image to fill the entire target box edge-to-edge — that requires cropping (a 'cover' fit), not this tool's 'contain' behavior.
- Providing a target rectangle far larger than the source and being surprised by blocky upscaling; nearest-neighbor doesn't smooth enlarged images.
Tips
- Use a square target rectangle for a quick, consistent avatar/thumbnail size across a batch of images.
- Combine with the border adder tool afterward to add a frame around the fitted result.