Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: image resize with window (maintain aspect ratio)

  1. #1
    Join Date
    Jan 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default image resize with window (maintain aspect ratio)

    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%.

    I basically want the best of both worlds. I know I need to turn to javascript but I only know how to manipulate other's code, or create some of my own little mootools scripts (and very limited at that).

    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:
    1. get the browser window size
    2. get the ratio - x/y
    3. get the image size
    4. get the ratio x/y
    5. if the browser ratio is less than the image ratio set height to 100%
    6. ...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
    7. visa versa if the browswer window ratio is greater than image
    8. update this live as the browswer window is resized by the user


    Impossible? With a few more lessons in javascript I'm sure I could punch out some code to do this when the page loads. However I'm uncertain I could make it work "live" as the user changes the window.

    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!
    Last edited by rpflorence; 01-29-2008 at 02:47 AM. Reason: Misspelled word

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,935
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Generally if you set only one dimension of an image, the other will end up being proportional to it. Different browsers may do this differently, especially in a complex layout, but in a simple example:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    img {
    width:100%;
    }
    </style>
    </head>
    <body>
    <img src="../side/1st.jpg" alt="original image" title="">
    </body>
    </html>
    IE 7 & 6, Opera 9.24, FF 2.0.0.11, and Safari 3 Win all handled it quite well.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    2 problems with that:

    1 - if the image is "wide" and the browser is "tall" then there's a bunch of white space beneath the image.

    2 - if the image is taller than the browser window it cuts off the bottom of the image, instead of keeping it vertically centered on the page.

    Thanks for the input, but I already talked about that method and it's problems in my original post.

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by rpflorence View Post
    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)
    Yeah, it's actually not so hard in Flash. I've done something like that for quite a few projects.

    I could spit up some AS code if it'll inspire some JS-knowledgable folks to use the same logic in JS.

  5. #5
    Join Date
    Sep 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Try this. Works well in IE and firefox.

    Although the vertical centre is not catered for...

    HTML Code:
    <html>
    <head>
    <title>Image</title>
    
    <script type="text/javascript">
    
    function resizeImage()
    {
    	var window_height = document.body.clientHeight
    	var window_width  = document.body.clientWidth
    	var image_width   = document.images[0].width
    	var image_height  = document.images[0].height
    	var height_ratio  = image_height / window_height
    	var width_ratio   = image_width / window_width
    	if (height_ratio > width_ratio)
    	{
    		document.images[0].style.width  = "auto"
    		document.images[0].style.height = "100%"
    	}
    	else
    	{
    		document.images[0].style.width  = "100%"
    		document.images[0].style.height = "auto"
    	}
    }
    </script>
    
    <body onresize="resizeImage()">
    <center><img onload="resizeImage()" margin="0" border="0" src="MyImage.jpg"></center>
    </body>
    
    
    </head>
    </html>
    Last edited by Snookerman; 06-22-2009 at 08:53 PM.

  6. #6
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by MickFromSydney View Post
    ...
    Although the vertical centre is not catered for...
    After a couple of initial mishaps I got it to work in a table:

    Code:
    <body onresize="resizeImage()">
    <center>
    <table height="100%" width="100%"><td valign="middle">
    <center><img onload="resizeImage()" margin="0" border="0" src="image.gif"></center>
    </td></table>
    </center>
    </body>
    Last edited by rpn; 06-22-2009 at 09:29 PM.

  7. #7
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Using MickFromSydney's code for multiple objects.

    Hi,

    Im working on trying to get my flash site into html. I was hoping to get it to resize like the effect of Mick's code. It works well with a single image here:

    http://www.andy-jacobs.com/images/imagetest.html

    I got my images fading with buttons here:

    http://www.andy-jacobs.com/slider.html

    I was wondering if there is a way to use the code to apply to the buttons and images so they will fit full span across the page.

    Thanks
    Andy

  8. #8
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Hi Andyj, I have a quick demo of the ultimate fadein slideshow with a kind of fit to screen feature. This one is set to 90% of the screen width, but that can be changed. it doesn't look to good because the images are of a low resolution, but take a look if you are interested. The toogle buttons could be put in the container as well with some adjustments.
    Demo

  9. #9
    Join Date
    Jul 2010
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hey,

    Thats great, exactly what I am trying to do, but do you know how I can combine the buttons I have in my page so it all resizes as one. I tried just adding your code to my page and it didnt work. I assume the code I am using to arrange the arrows on the sides of the image are conflicting with your code.

    Thanks
    Andy

  10. #10
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by azoomer View Post
    Hi Andyj, I have a quick demo of the ultimate fadein slideshow with a kind of fit to screen feature. This one is set to 90% of the screen width, but that can be changed. it doesn't look to good because the images are of a low resolution, but take a look if you are interested. The toogle buttons could be put in the container as well with some adjustments.
    Demo
    azoomer,

    I found your demo very useful. However, I was enable to edit the code so that whenever the mouse goes over the pictures it doesn't stop the slideshow.... I don't want it to stop.

    Thanks,

    kevin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •