object-position Focal Percent Placement
Two-axis object-position percentage alignment for independently rendered object size, not percent of source focal coordinate, object-fit scaling or background-position alias. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
Object-position percentages distribute the difference between container and rendered-object dimensions.
Object-position percentages distribute the difference between container and rendered-object dimensions.1
The calculation requires the already established rendered size rather than centering a focal point automatically. Use object-position Focal Percent Placement to evaluate the supplied inputs under the specific model below.
When to use object-position Focal Percent Placement
Use object-position Focal Percent Placement to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
How to use object-position Focal Percent Placement and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Content width px, Content height px, Rendered object width px, Rendered object height px, Position x percent, Position y percent using the field table and validation rules below, then run the tool.
- Read Object offset x, Object offset y and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| contentWidthPx | Content width px | number | Required; constraints below |
| contentHeightPx | Content height px | number | Required; constraints below |
| renderedObjectWidthPx | Rendered object width px | number | Required; constraints below |
| renderedObjectHeightPx | Rendered object height px | number | Required; constraints below |
| positionXPercent | Position x percent | number | Required; constraints below |
| positionYPercent | Position y percent | number | Required; constraints below |
Enter nonnegative container and fitted-object dimensions and finite signed x/y positions in percent. Multiply each remaining-space difference by positionPercent/100. Percentages outside 0 to 100 are accepted, as are objects larger than the container, so offsets can be negative. Object-fit sizing must already have been established.
offsetX = (containerWidth−objectWidth)×xPercent/100; offsetY = (containerHeight−objectHeight)×yPercent/100 Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| objectOffsetX | Object offset x | number |
| objectOffsetY | Object offset y | number |
{
"input": {
"contentWidthPx": 100,
"contentHeightPx": 80,
"renderedObjectWidthPx": 200,
"renderedObjectHeightPx": 100,
"positionXPercent": 25,
"positionYPercent": 50
},
"output": {
"objectOffsetX": -25,
"objectOffsetY": -10
}
}Limitations and assumptions
The calculation requires the already established rendered size rather than centering a focal point automatically. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use Grid fr Free-Space Share Calculator for a related task: Fractional grid tracks share independently resolved remaining space.
Use flex-basis:auto Content Size Note for a related task: An automatic flex basis can use a definite main size or fall back to a content basis.
References
-
object-position Focal Percent Placement — tool.io
Similar or alternative tools
- Grid fr Free-Space Share Calculator
Fractional grid tracks share independently resolved remaining space.
- flex-basis:auto Content Size Note
An automatic flex basis can use a definite main size or fall back to a content basis.