This may go right over the heads of some of you. That's fine. Basically, I'm not as supergenius as I claim and/or this problem is not solvable. Here's a picture of my old kitty taking a ride in my car so you didn't completely waste your time:
Basically I have an image like shown here:
The blue rectangle image will resize to 100% height of the screen and be centered. The aspect ratio of said image will stay the same as the height of the screen changes.
The white circles are buttons (can be divs, images, whatever the fuck i want them to be) that will lay over the image. These will be links.
Is there any way to position these buttons so they appear on the rectangle at the exact position and relative size of the blue rectangle as the monitor size changes?
A bit of backstory about the client's request before you ask why the hell I'm even trying to do this.
Basically the blue rectangle represents a photo of their product. On said product there are buttons that, on this demo, will be links. They want their end users to be able to view the product at 100% height on the computer (because it is taller than it is wide) so there are no scroll bars.
I can easily get the image to resize to 100% of the monitor height. And then the buttons to resize to the percentage of the screen. I haven't tried but I assume using absolute positioning and % margins I can position them where I need them to be, height-wise.
The problem is width. With an undefined width that is relative to the height of the monitor, I have no way to shift the buttons left or right or define their width so they lay where they are supposed to lay or be the size they are supposed to be.
If I use percentages for the width, the positioning and width will be vastly different depending on if they have a 4:3 monitor or 16:9 monitor.
The client only requests it work on computers/laptops/netbooks (their words, not mine) because the end user will be using a computer almost 100% of the time, as they will be landing on this page to print some huge but necessary long documents. The client hopes that this interactive landing page will help them become more familiar with the product and therefore use it more/buy more/etc.