Aspect Ratio Fit Calculator

There are only two honest ways to put an image of one shape into a frame of another: show all of it and accept bars, or fill the frame and lose the edges. This computes both boxes exactly, tells you how wide the bars are and how much gets cropped, and reduces both shapes to their simplest ratio so you can see at a glance which way the mismatch runs.

Source width

The width of the image you are starting from, in pixels.

Source height

The height of the image you are starting from, in pixels.

Frame width

The space the image has to sit inside, in pixels.

Frame height

The height of that space, in pixels.

Your layout will appear here.

What this generator does

Compares the source ratio against the frame ratio and computes both fits: the largest box that stays inside the frame, and the smallest that covers it. Both are re-measured against the source ratio before display, and each is confirmed flush against the frame on the dimension that constrained it.

How to use this tool

Enter the pixel size of your source image.
Enter the size of the frame it has to sit in.
Read the contain box and the bars it leaves.
Read the cover box and how much it crops off each edge.

Understanding the controls

Source width and height: The image you are starting from, in pixels. Only the ratio matters, so a 4000×3000 photo behaves exactly like a 400×300 one.
Frame width and height: The space it has to fit into. If this ratio matches the source, both fits give the same answer and nothing is lost either way.

Common use cases

Deciding between letterboxing and cropping for a specific image
Working out the exact bar height before designing around it
Checking how much of an image a thumbnail crop will discard
Explaining the difference between contain and cover with real numbers
Sizing an image for a fixed frame in a template or slide

How this generator works

If the source is proportionally wider than the frame, containing it means matching the frame's width and leaving bars above and below, while covering means matching the frame's height and losing the sides. If it is taller, the two swap over. Both boxes are computed from the source ratio directly rather than by scaling one from the other, then each is re-measured: the contain box must sit inside the frame and touch it on one dimension, and the cover box must reach the frame on both and exceed it on at most one.

Randomness and fairness

Nothing here is random. Two sizes in, two boxes out, the same every time.

For how randomness is produced across the whole site, see how Generate Random works.

Limitations and good to know

Assumes the image is centred; an off-centre or subject-aware crop moves the bars and the losses around, though the totals stay the same.
Says nothing about which choice looks better — a face near the edge may make a small crop worse than a large bar.
Pixel dimensions are treated as square pixels; anamorphic or non-square-pixel footage needs its display ratio entered instead.
Rounding is to two decimals for display, so a browser laying the same image out may differ by a fraction of a pixel.

Privacy and your data

Everything is calculated in your browser. No image is uploaded, and no dimension you type is transmitted or included in analytics.