CSS Aspect-Ratio Rounding Checker
Divide CSS width by the requested width-to-height ratio. Then multiply the fractional height by device-pixel ratio and compare floor, nearest, and ceil candidates.
One box, two pixel grids
A 317 CSS-pixel-wide box at 16:9 has an ideal CSS height of 317 × 9 ÷ 16 = 178.3125. At 1.25 device pixels per CSS pixel, that height maps to 222.890625 device pixels. A physical raster cannot paint 0.890625 of a device pixel as an independent row, so this checker audits three integer candidates instead of hiding the choice: 222 by floor, 223 by nearest, and 223 by ceil.
Ideal CSS height = CSS width × ratio height ÷ ratio width
Ideal device height = ideal CSS height × DPR
Painted CSS height = rounded device height ÷ DPR
Rounding ledger for the current inputs
The first table keeps width, ratio, and DPR fixed while changing only the integer rule. Height drift is the reconstructed CSS height minus the ideal CSS height. Ratio drift compares the reconstructed width-to-height ratio with the requested ratio. Cross-product delta tests the two sides without dividing: device-width × ratio-height minus rounded-device-height × ratio-width.
| Rule | Device height | Painted CSS height | CSS height drift | Ratio drift | Cross-product delta |
|---|
For the default case, floor paints 177.6 CSS pixels and misses by −0.7125 CSS pixels. Nearest and ceil both choose 223 device pixels, reconstruct 178.4 CSS pixels, and miss by +0.0875. The smaller height error is not a promise about a particular browser pipeline; it is the nearest candidate under the inputs shown.
DPR sweep: where the candidate changes
This test holds the 317-pixel CSS width and 16:9 ratio constant, then applies nearest-integer device-height rounding at five DPR values. The same CSS geometry can land at different physical fractions because DPR changes the device grid. A higher DPR usually reduces the size of one device-pixel step when expressed back in CSS pixels, but it does not guarantee zero drift.
| DPR | Ideal device height | Nearest row | Painted CSS height | CSS height drift | Ratio drift |
|---|
The zero-drift condition is exact and testable: ideal CSS height × DPR must be an integer. For this 178.3125-pixel height, DPR 2 still gives 356.625 device pixels, so it cannot land exactly on a physical row. Changing DPR alone does not repair a fractional product.
What this checker can and cannot prove
It can prove the ideal layout height, the physical-grid candidates, and the error each candidate would introduce. It cannot declare one candidate to be the universal browser result. Layout, compositing, transforms, zoom, borders, and painting can be handled at different stages, and CSSOM measurements can preserve fractional values. Measure the actual element with getBoundingClientRect() when a production browser result matters.
Do not round the CSS height before applying DPR. In the default case, rounding 178.3125 to 178 first and then multiplying by 1.25 gives 222.5; that discards 0.3125 CSS pixels before the physical grid is even considered. Also do not confuse a CSS pixel with a device pixel. DPR is the conversion factor between those coordinate spaces, not an extra aspect-ratio term.
Borders are another common source of false alarms. The specified aspect-ratio works with the box selected by box-sizing. If you compare a content-box calculation with a border-box measurement, the disagreement can be real while the browser's ratio calculation is still correct. Record the measured box, zoom, DPR, and rounding assumption together.
Technical references checked on 2026-11-05
The CSS Box Sizing Level 4 draft defines aspect-ratio as a preferred width-to-height ratio and identifies which box dimensions participate. CSS Values and Units defines the CSS pixel independently of a guaranteed one-to-one device-pixel mapping. CSSOM View exposes fractional geometry through DOM rectangles and a double-precision devicePixelRatio. MDN documents that DPR is physical resolution divided by CSS-pixel resolution. The formulas, DPR sweep, candidate ledger, error analysis, and SVG on this page were created for this page.
CSS aspect-ratio rounding questions
Why is a 16:9 height fractional in CSS?
Because width × 9 ÷ 16 is not always an integer. A 317-pixel width produces 178.3125 CSS pixels.
Does the browser always round layout to whole CSS pixels?
No. Layout and CSSOM measurements can retain fractional CSS values. Physical painting introduces a separate device grid.
Does DPR 2 eliminate ratio drift?
Only when ideal CSS height × 2 is an integer. The default test produces 356.625 device pixels, so an integer candidate still differs.
How should I verify a real component?
Read its bounding rectangle in the target browser and record the viewport, zoom, DPR, box sizing, and transforms before comparing it with the ideal formula.