Why the focal point is not the same as object-position
CSS percentages align a point on the image with the same percentage point in the box. They do not directly mean “put this source pixel in the centre”. This tool works out the fitted image dimensions and the offset needed to centre your selected point where the image edges allow it.
Worked example
A 1200 × 800 image placed in a 400 × 400 box with cover becomes 600 × 400 CSS pixels. A focal point at 60% across the source needs a horizontal offset of −160 pixels. The available horizontal movement is −200 pixels, so the correct object-position is 80% 50%.
How to use the generated code
- Upload your image or enter its actual pixel dimensions.
- Select a focal point on the source preview.
- Enter the desktop and mobile box sizes and breakpoint.
- Compare the crops, then copy the wrapper and image CSS.
- Replace the example path and alt text. Test in the page where the image will appear.
Frequently asked questions
Does this find faces or subjects automatically?
No. You select the point that matters. It may be a face, product, logo or any other part of the image.
Will one position work for every image size?
The calculated position stays valid when a box changes size while keeping the same aspect ratio. A different aspect ratio can need a different position. The generated media query switches both the ratio and position for your mobile box.
What is the difference between cover and contain?
Cover fills the box and may crop the image. Contain shows the entire image and can leave empty space. Neither changes the image file.
Why does my selected point stay away from the centre?
The image has reached an edge. Moving farther would leave an empty strip in the box. The calculator clamps movement rather than promising impossible centring.
Are my images sent to your server?
No. Supported local images are read in your browser. The generated code contains a placeholder path, not your photo or its local URL.
Technical reference: W3C CSS Images — object-position.