For a project I am working on I need a specific section of an image always being visible in the viewport of any device. More specifically, an object (a chair) should be always present in the viewport, either you see at it as landscape or portrait.
In my example below (codepen) the target chair is in the right bottom corner of the image:
You should see the pen with developer tools and verify for different mobile views to better understand my question.
I have partially achieved the goal. You will also notice that the view doesn’t overflow, which is also required.
What I am questioning is my technique. I am currently using background images in wrapped elements and then scaling / translating the background image using CSS media queries accordingly. However I haven’t found a solution that is consistent for any simulated device in developer tools (Chrome).
Any suggestion of how to improve this?
You will notice that there is still some white margins in some views too. Any way to get rid of them?