object-fit:contain Letterbox Dimensions
Compute contain scale, rendered dimensions, and total unused space for positive intrinsic dimensions and a nonnegative content box.
Description
The contain fitting rule preserves an image's aspect ratio while fitting its whole rendered rectangle inside a content box.
The contain fitting rule preserves an image's aspect ratio while fitting its whole rendered rectangle inside a content box. The remaining width or height is unused space, often called letterboxing.1, 2
Compute contain scale, rendered dimensions, and total unused space for positive intrinsic dimensions and a nonnegative content box.
When to use object-fit:contain Letterbox Dimensions
Use this tool to compute contain scale, rendered dimensions, and total unused space for positive intrinsic dimensions and a nonnegative content box.
Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
How to use object-fit:contain Letterbox Dimensions and understand its results
- Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
- Enter imageWidth, imageHeight, boxWidth, boxHeight using the field table and calculation rules, then run the tool.
- Read scale, renderedWidth, renderedHeight, unusedWidth, unusedHeight. The explanation below defines the units, signs, ordering and any flags or placeholder values.
- If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.
| Input field | Meaning | Value type; see rules below | Requirement |
|---|---|---|---|
| imageWidth | Intrinsic image width | number; strictly above: 0 | Required |
| imageHeight | Intrinsic image height | number; strictly above: 0 | Required |
| boxWidth | Content box width | number; minimum: 0 | Required |
| boxHeight | Content box height | number; minimum: 0 | Required |
Enter strictly positive intrinsic image dimensions and nonnegative content-box dimensions in matching units. The tool selects the smaller axis ratio, computes the rendered dimensions and returns total unused width and height, clamped nonnegative against roundoff. If either box dimension is zero, the contain scale and both rendered dimensions are zero. Nonrepresentable positive fits are errors.
scale = min(boxWidth/imageWidth, boxHeight/imageHeight); rendered dimensions = intrinsic dimensions × scale Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| scale | Contain scale | number; minimum: 0 |
| renderedWidth | Rendered width | number; minimum: 0 |
| renderedHeight | Rendered height | number; minimum: 0 |
| unusedWidth | Unused horizontal space | number; minimum: 0 |
| unusedHeight | Unused vertical space | number; minimum: 0 |
{
"input": {
"imageWidth": 400,
"imageHeight": 200,
"boxWidth": 100,
"boxHeight": 100
},
"output": {
"scale": 0.25,
"renderedWidth": 100,
"renderedHeight": 50,
"unusedWidth": 0,
"unusedHeight": 50
}
}Limitations and assumptions
Unused space is the total across an axis, not a per-side inset. Centered placement would divide that space between two sides, but object-position is not modeled. The tool does not obtain intrinsic dimensions from a file, inspect a DOM box or support other object-fit rules.
Numeric inputs must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.
Alternative or Complementary methods
Use object-fit:cover Scale Factor Crop: Compute cover scale, rendered dimensions, and total crop overflow for positive intrinsic dimensions and a nonnegative content box. For a complementary task, use background-position Percent Alignment Formula: Resolve one background-position percentage as a pixel offset from the near edge using positioning-area size minus rendered-image size; oversized images and out-of-range percentages are allowed.
Further background: CSS Images: cover and contain constraint sizing.
References
Similar or alternative tools
- object-fit:cover Scale Factor Crop
Compute cover scale, rendered dimensions, and total crop overflow for positive intrinsic dimensions and a nonnegative content box.
- background-position Percent Alignment Formula
Resolve one background-position percentage as a pixel offset from the near edge using positioning-area size minus rendered-image size; oversized images and out-of-range percentages are allowed.