0

It seemed so simple just a day ago, but I can't figure it out:

How do I center an image on a page, giving it fixed % margins (10% on all sides) and still have it scale with the window on resize?

It's very important that the page and the image display well on all platforms, without scrollers (!). The page itself is very simple and only contains the image (which on different versions of the page has different dimensions), and a bar on the top with a link to send it to another page.

The max size of the image would be 1500x1000px, no minimum size.

I wholeheartedly hope someone can help me out with this, thanks so much!

Jay
  • 1

1 Answers1

0

Best way to do that is using JavaScript. Get the window size, subscribe for window.onresize event and update the image size and position accordingly.

Using CSS only will NOT work, because any position properties depend on the container. In your case the container is the window, which will size itself based on the content. This creates a sort of circular dependency (window size depends on the image, the image size and position depend on the window size).

For information about getting the exact available window size in cross-browser way you could check this post: Get the size of the screen, current web page and browser window - haven't done that in a while to provide you with exact code.

Also note that you don't mention keeping the aspect ratio of the image. If it should not be maintained there is no way to do it HTML/CSS only, because all operations with them do maintain AR of images.

Community
  • 1
  • 1
Dimitar K
  • 794
  • 5
  • 9
  • Thanks Dimitar, very cool that you answered so quick! But apparently I have to leave the web coding to the pros, because I can't seem to make it work. I'll be hiring a guy tomorrow to see if he can fix it for me. Best regards and thanks again, Jay – Jay May 14 '13 at 15:37