I have a div with a large image as the background, which needs to be displayed once at the maximum size allowed by the container while maintaining aspect ratio. The image can have any aspect ratio and so can the resizable container. I was able to achieve this using the following CSS:
background-size:contain;
background-repeat:no-repeat;
background-position: center center;
width:100%;
height:100%;
background-image: url("path/to/img");
Above this image, I need an 8x8 table layout that scales along with the background image.
In my jsfiddle example, you can see the image working correctly (try resizing the window), but I am unsure how to make the table always scale directly over the image (the goal is for field A1 to consistently mark the same spot on the image, regardless of its size, aspect ratio, or the container's aspect ratio).
https://jsfiddle.net/15uovq7L/4/
If there is no CSS/HTML solution to this issue, I am open to a jQuery/JavaScript solution.