object-fit:cover Scale Factor Crop
Compute cover scale, rendered dimensions, and total crop overflow for positive intrinsic dimensions and a nonnegative content box.
Description
The cover fitting rule preserves aspect ratio while making the rendered image cover both dimensions of a content box.
The cover fitting rule preserves aspect ratio while making the rendered image cover both dimensions of a content box. Any rendered excess extends beyond the box and may be cropped according to placement.1, 2
Compute cover scale, rendered dimensions, and total crop overflow for positive intrinsic dimensions and a nonnegative content box.
When to use object-fit:cover Scale Factor Crop
Use this tool to compute cover scale, rendered dimensions, and total crop overflow 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:cover Scale Factor Crop 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, cropWidth, cropHeight. 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 positive intrinsic image dimensions and nonnegative content-box dimensions in matching units. The tool chooses the larger axis ratio, returns the scaled width and height, and calculates total horizontal and vertical overflow. Both zero box dimensions give scale zero; one zero dimension alone can still leave a positive cover scale. Nonfinite or unexpectedly underflowed fits are errors.
scale = max(boxWidth/imageWidth, boxHeight/imageHeight); crop dimensions = max(0, rendered − box) Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| scale | Cover scale | number; minimum: 0 |
| renderedWidth | Rendered width | number; minimum: 0 |
| renderedHeight | Rendered height | number; minimum: 0 |
| cropWidth | Horizontal crop overflow | number; minimum: 0 |
| cropHeight | Vertical crop overflow | number; minimum: 0 |
{
"input": {
"imageWidth": 400,
"imageHeight": 200,
"boxWidth": 100,
"boxHeight": 100
},
"output": {
"scale": 0.5,
"renderedWidth": 200,
"renderedHeight": 100,
"cropWidth": 100,
"cropHeight": 0
}
}Limitations and assumptions
Crop values are total overflow rather than left/right or top/bottom crop amounts. Object-position, browser clipping and pixel sampling are not simulated. It assumes both intrinsic dimensions are supplied and does not extract image metadata.
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:contain Letterbox Dimensions: Compute contain scale, rendered dimensions, and total unused space 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:contain Letterbox Dimensions
Compute contain scale, rendered dimensions, and total unused space 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.