Image aspect ratio crop and pad previewer
Choose local images to compare four output shapes side by side. Adjust positioning and background, then prepare cropped or padded PNGs without uploading your files.
Compare local image crops and padded outputs. JavaScript is required. Images stay in your browser.
How it works
Crop uses cover sizing: scale the image until both output dimensions are filled, then remove the overflow. Pad uses contain sizing: scale until the whole image fits, then fill empty space with your selected color. These follow the W3C cover and contain definitions.
crop scale = max(output width / image width, output height / image height) pad scale = min(output width / image width, output height / image height) crop loss = 1 − output area / scaled image area padding = 1 − scaled image area / output area
Downloads are 1,080 pixels wide: 3:4 gives 1,080 × 1,440; 4:5 gives 1,080 × 1,350; square gives 1,080 × 1,080; 9:16 gives 1,080 × 1,920. These are design templates, not platform limits. Position 0% aligns the leading edge, 50% centers and 100% aligns the trailing edge. In pad mode, position moves the empty space to the opposite edge.
Geometry is calculated without intermediate rounding; canvas height uses the nearest whole pixel and displayed percentages use two decimals. Crop loss measures area removed, not visual importance. A face near an edge may matter more than the percentage suggests.
Worked examples
3:4 portrait cropped to 4:5
A 3,000 × 4,000 image fills a 1,080 × 1,350 output at scale 0.36. Its scaled height is 1,440 pixels, so 90 pixels are removed: 6.25% crop loss. Centering removes 45 pixels from each end.
Square padded to 3:4
A 1,000 × 1,000 image becomes 1,080 × 1,080 inside a 1,080 × 1,440 canvas. No image area is lost; 25% of the canvas is padding, with 180 pixels above and below when centered.
Frequently asked questions
Does padding keep the whole image?
Is 3:4 the same as 4:5?
Will this predict a social profile grid?
How do batch downloads work?
Which files and sizes can I use?
Sources
- W3C CSS Images Level 3 — section 4.3.2 cover and contain sizing (checked 2026-11-14)
Last reviewed 2026-11-14; next review due by 2027-02-12. The method is written out above so you can check our math.