Uwarp

Output rectangle: 800 × 600 px · contain · transparent padding

Or try an example

Width (px)
Height (px)

Help Us Improve

—

(—)

Fit PNG in a rectangle online

Fit a PNG into a rectangle online free. Set exact width and height, contain/cover/stretch the image, optional transparent padding — make a rectangle picture or square that is a perfect fit.

What does fit PNG in rectangle mean?

Fitting a PNG in a rectangle means placing your image inside a canvas with a fixed width and height — a rectangle picture at exact pixels. People search for “png rectangle”, “rectangle image”, “rectangle picture”, “rectangle pic”, “make an image a perfect fit”, and “make picture square” when they need letterboxing or cropping into a known frame. This tool scales with contain (fit inside), cover (fill and crop), or stretch, optionally keeping transparent padding. It differs from /resize-image (scale only) and /aspect-ratio-changer (ratio-first sizing). For empty frames see /blank-image; for centering content see /center-image.

Fit-in-rectangle features

Exact pixel frames for PNGs and photos.

  • Exact width × height

    Define the rectangle in pixels — not just a ratio.

  • Contain / cover / stretch

    Fit inside, fill and crop, or distort to the frame.

  • Rectangle presets

    Quick sizes: 800×600, Full HD, OG 1200×630, square and story formats.

  • Transparent or solid padding

    Clear letterbox for PNG overlays, or a solid rectangle background.

  • Square-ready

    Equal sides make picture square / image into square in one click.

  • Private & free

    Browser-only — no uploads.

How to fit an image in a rectangle

Make a perfect-fit rectangle picture in four steps.

  1. Upload

    Drop a PNG, JPEG, WebP, or GIF still.

  2. Set the rectangle

    Enter width and height or pick a preset size.

  3. Choose fit mode

    Contain for no crop, Cover to fill, Stretch to force dimensions.

  4. Download

    Save the fitted PNG (or change format in download options).

Tips for rectangle fits

Get cleaner results faster.
  • 01

    Use Contain for logos

    Never crop branding — letterbox with transparent padding.

  • 02

    Use Cover for photos

    Fill the frame when empty bars look wrong.

  • 03

    Square = equal sides

    A square is a rectangle — set width = height for image into square.

  • 04

    Need only a ratio?

    Prefer /aspect-ratio-changer when you care about 16:9, not exact pixels.

Rectangle fit tools compared

How this free fit-PNG-in-rectangle tool stacks up.

  • Online PNG Tools (fit PNG in rectangle)

    Competitor ranking for png rectangle / rectangle image. This page matches that intent with exact sizes, fit modes, and transparent padding — offline in the browser.

  • Resize Image (/resize-image)

    Changes pixel dimensions of the image itself. Use Fit in Rectangle when you need a fixed outer frame with padding or crop.

  • Aspect Ratio Changer (/aspect-ratio-changer)

    Ratio-first (16:9 etc.). Use this tool when the slot demands exact width × height.

  • This rectangle fitter

    Presets, contain/cover/stretch, transparent or solid padding, free PNG download. Best for perfect-fit rectangle pictures.

Great for

When you need a fixed rectangular frame.

  • App and CMS slots

    Match exact banner or thumbnail pixel sizes.

  • Social frames

    1080×1080 squares or 1080×1920 stories with contain padding.

  • OG / link previews

    Fit artwork into 1200×630 without distorting logos.

  • Uniform product grids

    Place mixed-ratio photos into identical rectangles.

Why use this rectangle fitter

Exact frames, not guesswork.

  • 100% free

    No account or watermark.

  • Pixel-accurate

    Output is exactly the width and height you set.

  • PNG-friendly

    Transparent padding keeps overlays clean.

  • Keyword-ready

    Built for png rectangle, rectangle image, and perfect-fit searches.

Technical details

How this PNG rectangle fitter works.
Output size
Exact width × height you set (1–8192 px per edge).
Scaling
Contain / cover math mirrors CSS object-fit; stretch uses drawImage to full rect.
Padding
Transparent clearRect or solid fillRect behind the scaled image.
Processing
100% client-side Canvas 2D — no uploads.

Sources & References

References on object-fit style scaling, PNG, and canvas drawing.
  • “The object-fit CSS property sets how the content of a replaced element should be resized to fit its container.”
    — MDN Web Docs — object-fit

    CSS object-fit: Contain and cover modes mirror CSS object-fit: scale the image inside a fixed rectangle without (or with) cropping. developer.mozilla.org/en-US/docs/Web/CSS/object-fit

  • “The Canvas API provides a means for drawing graphics via JavaScript and the HTML canvas element.”
    — MDN Web Docs — Canvas API

    Canvas API: This tool draws the source image scaled into an exact width × height canvas with optional transparent padding. developer.mozilla.org/en-US/docs/Web/API/Canvas_API

  • “PNG supports lossless compression and an optional alpha channel.”
    — Wikipedia — PNG

    PNG format: Transparent letterbox padding keeps a clear PNG rectangle when you do not want a solid backdrop. en.wikipedia.org/wiki/PNG

  • “In Euclidean plane geometry, a rectangle is a quadrilateral with four right angles.”
    — Wikipedia — Rectangle

    Rectangle (geometry): A square is a special rectangle — use equal width and height presets to make picture square / image into square. en.wikipedia.org/wiki/Rectangle

Frequently Asked Questions

Quick answers about this tool—open a question to read more.