The Math of Fitting One 4K Wallpaper to Every Screen: Aspect Ratios, Crops and Scaling

I spend more time than I'd like to admit fitting images to screens: a 16:9 monitor, a 21:9 ultrawide, a 19.5:9 phone, a 4:3 tablet. Every device wants something slightly different, and the "fill" setting in your OS just guesses. Once you understand the arithmetic behind it, you can crop a single high-resolution image cleanly for all of them. Here's the reasoning I use.

Aspect ratio is the whole game

An aspect ratio is width divided by height. A 3840×2160 image is 16:9, or about 1.778. Common targets:

When the source ratio and the target ratio differ, you have three choices: crop, letterbox (add bars), or stretch. Stretching distorts, letterboxing wastes screen, so cropping is almost always right for wallpapers.

Computing the largest crop

For a source of width W and height H, and a target ratio r = targetW / targetH:

function largestCrop(W, H, r) { const sourceRatio = W / H; if (sourceRatio > r) { // source is wider: keep full height, trim width return { w: Math.round(H * r), h: H }; } // source is taller or equal: keep full width, trim height return { w: W, h: Math.round(W / r) }; } largestCrop(3840, 2160, 2560 / 1600); // { w: 3456, h: 2160 } 16:10 largestCrop(3840, 2160, 3440 / 1440); // { w: 3840, h: 1607 } ultrawide largestCrop(3840, 2160, 1179 / 2556); // { w: 996, h: 2160 } phone 

Notice the phone case: a portrait crop from a landscape 4K image keeps only about a quarter of the width. That's why phone wallpapers cut from desktop art often feel "zoomed in". Its height (2160) is still below the phone's 2556 pixels, so it will be upscaled slightly, which is fine for soft abstracts and less fine for sharp detail.

Where to put the crop

The largest crop tells you the size. Position is a separate decision. Centre-cropping is the default, but it isn't always best. Three heuristics I use:

1. Rule of thirds. If the subject sits on a third line in the source, keep it on a third line in the crop by anchoring the crop window so the subject lands at 1/3 or 2/3 of the new width.
2. Leave room for UI. On a phone, the top quarter holds the clock and the bottom holds controls. Shift the crop so the subject sits in the middle band.
3. Ultrawide horizons. For 21:9 you're trimming height, so decide whether the sky or the foreground matters more and anchor top or bottom accordingly.

A simple anchored version:

function cropAt(W, H, r, focusX = 0.5, focusY = 0.5) { const { w, h } = largestCrop(W, H, r); const x = Math.min(Math.max(focusX * W - w / 2, 0), W - w); const y = Math.min(Math.max(focusY * H - h / 2, 0), H - h); return { x: Math.round(x), y: Math.round(y), w, h }; } 

focusX and focusY are the subject's position as fractions of the source. Clamping keeps the window inside the image.

Scaling after the crop

After cropping, resize to the device's exact resolution. Downscaling (cropped region bigger than the screen) is safe; use a good filter such as Lanczos or the browser's imageSmoothingQuality = "high" on a canvas. Upscaling more than about 20 percent starts to show softness, so prefer a source large enough that you're always scaling down.

Doing it in the browser

All of this works client-side with a <canvas>: load the image, compute the crop, call drawImage with the source rectangle and the destination size, and export with toBlob. Nothing needs to leave the user's machine, which is nice for privacy and speed. If you'd rather not write it yourself, the VITCOX browser tools do this kind of fit-and-crop for common screen sizes, and they're handy for checking your own maths against a working implementation.

Takeaways

• Compare ratios first; size follows from that.
• The largest crop keeps one full dimension and trims the other.
• Position the crop around the subject and the device's UI zones.
• Always scale down from a bigger source when you can.

The example image below is an AI-generated 4K city scene, which crops nicely to ultrawide because the interesting detail runs horizontally across the frame.