A 9:16 crop keeps 31.6% of a 16:9 video
A landscape recording does not become a portrait composition just because the exported file says 1080 × 1920. For a full-height crop from 16:9 to 9:16, the retained width is: (9 / 16) / (16 / 9) = 81 / 256 = 0.316406
A landscape recording does not become a portrait composition just because the exported file says 1080 × 1920.
For a full-height crop from 16:9 to 9:16, the retained width is:
(9 / 16) / (16 / 9) = 81 / 256 = 0.31640625
That is 31.64% of the source width and area. Moving the crop changes which part survives; it does not make the window wider.
This distinction is useful when building a video preview, estimating a crop, or deciding whether an interview should be cropped at all.
Source pixels are different from output pixels
Take a 1920 × 1080 recording. Its ideal full-height 9:16 window is:
1080 × (9 / 16) = 607.5 pixels wide
The ideal crop is therefore 607.5 × 1080 source pixels. A real renderer may align the edges to whole or even pixels, which is why explanations often round the width to about 608.
Filling a 1080 × 1920 output with that window requires roughly 1.78× enlargement in each dimension. The larger output dimensions do not establish that the original contains more detail.
A 3840 × 2160 source gives an ideal 1215 × 2160 window. That can be reduced to the same 1080 × 1920 output. Focus, compression and motion blur still matter; a bigger input is a pixel budget, not a quality guarantee.
Calculate crop and fit separately
Here is a small JavaScript function for square-pixel geometry. It handles either orientation and does not round the crop before calculating scale.
function planFrame(sourceWidth, sourceHeight, targetWidth, targetHeight) {
const dimensions = [sourceWidth, sourceHeight, targetWidth, targetHeight];
if (!dimensions.every(n => Number.isFinite(n) && n > 0)) {
throw new RangeError("Use positive finite dimensions");
}
const targetRatio = targetWidth / targetHeight;
const cropWidth = Math.min(sourceWidth, sourceHeight * targetRatio);
const cropHeight = Math.min(sourceHeight, sourceWidth / targetRatio);
const fitScale = Math.min(
targetWidth / sourceWidth,
targetHeight / sourceHeight
);
const fitWidth = sourceWidth * fitScale;
const fitHeight = sourceHeight * fitScale;
return {
cropWidth,
cropHeight,
cropScale: targetWidth / cropWidth,
sourceAreaKept: (cropWidth * cropHeight) / (sourceWidth * sourceHeight),
fitWidth,
fitHeight,
canvasAreaFilled: (fitWidth * fitHeight) / (targetWidth * targetHeight),
};
}
const portrait = planFrame(1920, 1080, 1080, 1920);
console.assert(portrait.cropWidth === 607.5);
console.assert(portrait.sourceAreaKept === 81 / 256);
console.assert(portrait.fitHeight === 607.5);
const square = planFrame(1920, 1080, 1080, 1080);
console.assert(square.cropWidth === 1080);
console.assert(square.sourceAreaKept === 0.5625);
const landscape = planFrame(1080, 1920, 1920, 1080);
console.assert(landscape.cropHeight === 607.5);
For the first example, a fitted landscape picture occupies 1080 × 607.5 pixels inside the portrait canvas. The entire source survives, but its main picture fills only 31.64% of the canvas.
These percentages describe different things:
| Layout | What the percentage measures |
|---|---|
| Crop | How much of the source picture remains |
| Fit | How much of the output canvas the main picture occupies |
| Fit over blur | The same main-picture area as Fit, with a blurred background in the remaining space |
Blur fills empty space. It does not make tiny interface text in the main picture larger or recover detail lost from the source.
Geometry cannot choose the subject
An interview may have two people too far apart to fit in a narrow crop. A screen recording may need its sidebar, cursor and slide text at the same time. A moving presenter may leave a crop that looked correct in the first frame.
Those are composition and review decisions. Google's AutoFlip research describes stationary, panning and tracking strategies, plus padding when important content cannot fit. Adobe's Auto Reframe workflow includes motion presets and subsequent keyframe refinement.
For a practical check, review a passage containing a camera cut, a speaker change and movement. Check the complete motion path, the context outside the crop, and any captions already burned into the recording.
Turn the calculation into a useful brief
A request such as “make it vertical” leaves the most important decision unstated: what must remain visible?
A more specific version is:
Reframe this interview to 9:16. Keep both speakers visible when their interaction matters. Use a cropped close-up where the important content fits, and a fitted view where it does not. Preserve the accepted cuts and audio. Reposition editable captions for the new frame, then show a preview for review.
We published a visual crop-and-fit planner where you can move an illustrated crop, compare layouts, and prepare a brief. It runs without uploading a video. The auto-reframe glossary explains the geometry and review decisions in more detail.
Disclosure: We build Valmera, an AI video editor. The planner is free; editing actual footage in Valmera is a separate product workflow with its own plans.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.