Marketing / Media & proof
Scale-to-fit product shot.
A product screenshot rebuilt as real DOM at a fixed natural width (e.g. 1180px), then scaled to the container via `transform: scale()` recomputed on a window `resize` listener (the source) — or a ResizeObserver. Stays crisp at any size and recolours to the marketing accent.
When to use
When you want a pixel-crisp, recolourable, on-brand product visual instead of a flat PNG — hero shots, feature proof, "see it in the product" moments. Skip it for true photography (use a real <img>).
UPS · 1Z…84$0.00
FedEx · 77…21−$14.20
USPS · 94…05$0.00
Illustration of the rebuilt-as-DOM idea: the panel is real markup recoloured to --m-accent, while money keeps its semantic colour. In production a ResizeObserver
scales a fixed-width inner to the container.