aspect-ratio Property vs Padding-Hack Note
Compare explicit-width preferred aspect-ratio height with percentage-padding hack referencing containing-block width; constraints/replaced-element ratio behavior excluded. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
Aspect-ratio sizing and percentage-padding techniques can use different width bases.
Aspect-ratio sizing and percentage-padding techniques can use different width bases.1
Comparing their geometry requires both widths rather than assuming they match. Use aspect-ratio Property vs Padding-Hack Note to evaluate the supplied inputs under the specific model below.
When to use aspect-ratio Property vs Padding-Hack Note
Use aspect-ratio Property vs Padding-Hack Note 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 aspect-ratio Property vs Padding-Hack Note and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Definite width px, Ratio width, Ratio height, Containing block width px using the field table and validation rules below, then run the tool.
- Read Aspect ratio height px, Padding hack height px 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 |
|---|---|---|---|
| definiteWidthPx | Definite width px | number | Required; constraints below |
| ratioWidth | Ratio width | number | Required; constraints below |
| ratioHeight | Ratio height | number | Required; constraints below |
| containingBlockWidthPx | Containing block width px | number | Required; constraints below |
Enter nonnegative definite element and containing-block widths in px and positive ratio width and height. Return elementWidth×ratioHeight/ratioWidth and containerWidth×ratioHeight/ratioWidth as two distinct reference calculations. Neither output runs the browser's aspect-ratio algorithm or establishes which box dimension resolves a padding percentage.
ratioHeightPx = definiteWidth×ratioH/ratioW; paddingReferenceHeightPx = containerWidth×ratioH/ratioW Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| aspectRatioHeightPx | Aspect ratio height px | number |
| paddingHackHeightPx | Padding hack height px | number |
{
"input": {
"definiteWidthPx": 200,
"ratioWidth": 16,
"ratioHeight": 9,
"containingBlockWidthPx": 300
},
"output": {
"aspectRatioHeightPx": 112.5,
"paddingHackHeightPx": 168.75
}
}Limitations and assumptions
Comparing their geometry requires both widths rather than assuming they match. 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 Transform Function Order Matters Note for a related task: Rotation and translation generally do not commute.
Use object-position Focal Percent Placement for a related task: Object-position percentages distribute the difference between container and rendered-object dimensions.
References
Similar or alternative tools
- Transform Function Order Matters Note
Rotation and translation generally do not commute.
- object-position Focal Percent Placement
Object-position percentages distribute the difference between container and rendered-object dimensions.