How is this different from gif-resizer?

gif-resizer stretches content to an exact width and height, which can distort aspect ratio. This tool instead preserves the original aspect ratio and adds letterboxing (transparent bars on the top/bottom or left/right) so nothing gets stretched.

What fills the empty space around the fitted content?

Transparent pixels. If you need a solid-colored background, composite the result over a background afterward with another tool.

Does the output canvas always match my target rectangle exactly?

Yes. Regardless of the source GIF's own aspect ratio, the output canvas is always exactly the requested target width and height, with the scaled content centered inside it.

Can this also enlarge a smaller GIF to fit a bigger rectangle?

Yes, the scale factor can be greater than 1 if the source is smaller than the target rectangle in both dimensions, enlarging it (via nearest-neighbor resampling) to fill as much of the rectangle as possible without distortion.

GIF Rectangle Fitter - Letterbox-Fit an Animated GIF

Overview

Introduction

Fitting content into a fixed-size box without distorting its proportions, the same behavior as CSS's object-fit: contain, is a common need when embedding animated GIFs of varying aspect ratios into a uniform layout slot.

This tool decodes each frame, scales it to fit inside your target rectangle while preserving aspect ratio, and re-encodes a new animated GIF at exactly that rectangle's size.

What Is GIF Rectangle Fitter?

A client-side tool that fits every frame of an animated GIF into a user-specified target width and height, scaling by the largest factor that keeps the whole frame within that rectangle without cropping or stretching, then centering the scaled frame on a transparent canvas of exactly the target size.

Depending on the source's aspect ratio relative to the target rectangle, this produces letterboxing (transparent bars above and below) or pillarboxing (transparent bars on the sides).

How GIF Rectangle Fitter Works

The tool computes the smaller of (target width / source width) and (target height / source height) as the scale factor, guaranteeing the scaled frame fits within the rectangle on both axes without exceeding either dimension.

It resamples the frame to that scaled size with nearest-neighbor interpolation, then centers it on a newly created transparent canvas matching the exact target width and height. This runs identically per decoded frame, so every re-encoded frame shares the same target canvas size.

When To Use GIF Rectangle Fitter

Use it whenever you need animated GIFs of different aspect ratios to consistently fit into the same fixed-size display area without distortion.

It's also useful for standardizing a batch of differently-shaped animated GIFs to one uniform canvas size for a grid or carousel layout.

Often used alongside GIF Resizer, GIF Canvas Size Changer and GIF Cropper.

Features

Advantages

Never distorts the source's aspect ratio, unlike a plain stretch-to-fit resize.
Guarantees the output canvas is always exactly the requested target size, regardless of the source's shape.
Runs entirely client-side; nothing you upload leaves your browser.

Limitations

Introduces transparent letterbox/pillarbox bars whenever the source and target aspect ratios don't match exactly, which may need a solid background composited in afterward for some use cases.
Nearest-neighbor resampling of the scaled content can look blocky on large scale factors.

Examples

Fitting a wide GIF into a square rectangle

Input

A 400x200 animated GIF (2:1 aspect ratio), target = 300x300

Output

A 300x300 animated GIF with the content scaled to 300x150 and centered, leaving 75px transparent bars above and below

The limiting dimension is height, so the content scales to fill the full 300px width while only reaching 150px of the 300px height, producing letterbox bars top and bottom.

Best Practices & Notes

Best Practices

Use this instead of gif-resizer whenever preserving the original aspect ratio matters more than filling the target rectangle edge-to-edge.
If you'd rather crop to fill the rectangle completely (no transparent bars), consider gif-zoomer or gif-cropper on a pre-scaled version instead.
Preview the result to confirm the letterbox/pillarbox bars look acceptable for your intended background.

Developer Notes

fitGifInRectangle in gif-rectangle-fitter.ts mirrors png-rectangle-fitter.ts's contain-fit-and-center math exactly (Math.min of the two axis scale ratios, then centered placement on a fresh canvas), applied per decoded GIF frame via transformGifFrames.

GIF Rectangle Fitter Use Cases

Standardizing animated GIFs of varying aspect ratios to one fixed display size for a grid or carousel
Embedding an animated GIF into a fixed-size UI slot without distorting its proportions
Preparing thumbnail-style previews that must exactly match a target width and height

Common Mistakes

Expecting the content to fill the entire target rectangle edge-to-edge; unless the aspect ratios match exactly, transparent bars are unavoidable with a contain-fit.
Using this when a full-bleed crop-to-fill result was actually wanted; that's gif-zoomer or gif-cropper's job, not this tool's.

Tips

If the letterbox bars look odd against your page background, composite the result over a solid color afterward.
For square thumbnails from wide or tall source GIFs, this tool avoids distortion better than a plain resize would.

GIF Rectangle Fitter