What must change for a box drawn on a source image to keep pointing correctly in a smaller frame? Reading cover styling alongside annotation coordinates led me to reproduce the geometry independently. This is a source-based design question, not an invented customer incident.
Cover includes both scaling and displacement
An eight-hundred by six-hundred source covering a six-forty by three-sixty viewport uses scale point eight. The image becomes six-forty by four-eighty and centered placement moves its top to minus sixty. A source y coordinate of two-fifty therefore maps to one-forty rather than two hundred.
Contain chooses the smaller scale so the whole source remains visible. In this viewport it produces scale point six and an eighty-unit left margin. Computing annotations from element width alone can miss that displacement. The two fit modes need different transforms even inside an identically sized element.
Retain the full region and visible intersection
Replacing the full rectangle with a clipped one loses information about the original subject. The module keeps the transformed box and its viewport intersection separately. A completely cropped region has null visibility and no label; label placement consults that state.
In the synthetic portrait canvas, the image offset is minus one-seventy. A source box starting at one-fifty with width two hundred maps to minus fifty with width one-sixty, of which one-ten is visible. This counterexample has its own test. I corrected an initial fixture that used a fully visible center box rather than weakening the clipping assertion.
Use the same model in reverse
To map a viewport point back to the source, subtract the offset and divide by scale. A point in a contain letterbox returns null because it is not part of the image. Round-trip checks return the source center across fit modes and canvas shapes, avoiding two unrelated approximate formulas.
Sizes must be finite and positive, with a region inside the source. Unknown fit values and invalid position or bounds fail. These checks do not measure DOM pixels. They establish geometry inside an SVG viewBox; real image loading and additional CSS transforms need integration checks.
Changing alignment changes the shared contract
When an oversized image is aligned to the top rather than center, the total cropped amount may remain equal while its location changes. Alignment is therefore an annotation input, not merely an image style. The new function accepts normalized horizontal and vertical positions and tests that image and box displacement change together.
Recording this choice makes layout assumptions explainable. It also helps identify why a marker moved while source coordinates remained unchanged. Manually tuned screen-specific coordinates can require another full review whenever an image changes.
The fixed shapes do not model failed loading or unknown external dimensions. A real image replacement needs a check that dimensions and region metadata belong to the same asset version. Valid coordinates and coordinates referring to the intended object in the current image are different facts.
Review readable labels separately
The module passed fifteen pure tests and thirty-six actual inline-script combinations with DOM stubs. It clamps declared label bounds without measuring font width, line wrapping or zoom usability. No mobile rendering verification is claimed and no client image is published.
For reuse, first define the source region and connect it to the actual image transform. If translation changes label size, its dimensions must be measured again. Responsive design here is the preservation of a meaningful relationship among elements, extending beyond simply shrinking each element.