First what I'm trying to do ... second what I've tried. Any tips would be great. $25 through paypal for the code monkey that helps me do it.
What I'd Like
I'd like an image to:
- fill window 100% width & height
- stretch the image to fill 100% as the user resizes the window
- maintain aspect ratio of the image and therefore...
- ...keep the image center & middle if the window aspect ratio doesn't match the image aspect ratio--it will cut off either the top & bottom or the left & right depending on the image and browser aspect ratios.
What I've Tried
I tried to use CSS for this.
Option 1 - image tag and css
In the css define width and height as 100%. This squishes or stretches the image as you resize and is therefore not an option (doesn't maintain aspect ratio).
Option 2 - div and css background image
Define a div and set the image as the background with x and y centered. This keeps the image nicely centered as you resize the window--but when your window is larger than the image it won't stretch to fill 100%.
Assuming I've got a 1000 x 700 image (wide) and the browser window is 600 x 800 (tall) then I'm imagining the logic to be:
- get the browser window size
- get the ratio - x/y
- get the image size
- get the ratio x/y
- if the browser ratio is less than the image ratio set height to 100%
- ...this will clip off the right side of the image and therefore have the script put the center of the image in the center of screen to share the clipping on both sides
- visa versa if the browswer window ratio is greater than image
- update this live as the browswer window is resized by the user
A couple days after trying to do this and giving up I stumbled onto Prada's website and pee'd my pants when I realized they had done what I want--except with flash so I couldn't nab it.
prada.com (some images don't stay vertically centered)
Thanks for reading!