Fit vs fill math
Phone Wallpaper Size Editor Online
The hard part of an online wallpaper editor is not changing width and height. It is deciding what to do when the photo and phone have different shapes—and showing that result before download.
Every wallpaper starts with two ratios
A 4:3 photo and a 20:9 phone cannot occupy the same rectangle without one of three changes: remove part of the photo, add space around it, or distort its shape. A good editor never hides that decision.
Let the source be Sᵥ × Sₕ and the target be Tᵥ × Tₕ. Calculate two candidate scales:
width scale = Tᵥ ÷ Sᵥheight scale = Tₕ ÷ Sₕ
Fit uses the smaller scale
Fit chooses min(width scale, height scale). Both source edges remain inside the target. The source keeps its aspect ratio, and the remaining target area becomes padding.
Example: fit a 1600 × 900 landscape photo inside 1080 × 2400. The width scale is 0.675; the height scale is 2.667. Fit uses 0.675, so the photo becomes 1080 × 608 pixels and needs space above and below.
Fill uses the larger scale
Fill chooses max(width scale, height scale). Every target pixel is covered, but the source extends past at least one target edge.
With the same source and target, Fill uses 2.667. The drawn photo becomes about 4267 × 2400 pixels, so the left and right sections leave the portrait frame. Dragging changes which horizontal section remains visible.
Blur fill uses both
Blur fill draws a Fill copy as the background, softens and darkens it, then places a Fit copy above it. The foreground stays complete while the background reaches every edge.
| Mode | Scale rule | Whole photo? | Full screen? |
|---|---|---|---|
| Fit | Smaller ratio | Yes | With solid space |
| Fill | Larger ratio | No, when ratios differ | Yes |
| Blur fill | Fit foreground + Fill background | Yes | Yes |
What “online” changes
The browser can perform this math and rendering without a remote image service. The Canvas 2D drawImage() method accepts a source image and a destination rectangle. Applying one scale to both dimensions preserves shape; Canvas then exports the composed bitmap with toBlob().
Cloud tools may add AI expansion, stock assets, team editing, and saved projects. Local browser tools trade those features for a faster one-file path and a simpler privacy model.
The final check
Read the composition message below the editor. “Crops left and right” means the ratio mismatch is resolved by removing overflow. “Full photo visible” means the complete source remains. That plain-language result is more useful than a generic “resized successfully” message.
References
Primary and product sources accessed July 30, 2026: