I have a set of images which I am displaying in a grid where each grid item is a square. I have set css variables on each image describing the focal point of the image as percentages from top left, and also the aspect ratio of the image as follows:
<img src="/img.jpg" style="--fx: 30; --fy: 70; --aspect: 0.66" />
I have set the image to object-fit: cover and I want to use object-position to make the focal point be as close to the center of the square container as possible without any space around the image.
I'm sure it must be possible using calc and var(--fx) etc and I've gotten close, but not managed to find a solution that works for all cases.
You can see a codepen with everything laid out - just needs the missing piece which is the value for object-position
https://codepen.io/photogsy/pen/gOZovVq
Thanks!