image resize with window (maintain aspect ratio)

**rpflorence** · 01-29-2008, 03:44 AM

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:

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

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!

**jscheuer1** · 01-29-2008, 03:49 PM

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.

**rpflorence** · 01-30-2008, 12:47 AM

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.

**Medyman** · 01-30-2008, 04:07 AM

Originally Posted by rpflorence

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.

**MickFromSydney** · 09-16-2008, 11:22 PM

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>

**rpn** · 06-22-2009, 08:42 PM

Originally Posted by MickFromSydney

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

**andyj** · 07-27-2010, 08:36 AM

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

**azoomer** · 07-27-2010, 02:10 PM

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

**andyj** · 07-28-2010, 09:13 PM

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

**kekeTex** · 11-23-2010, 05:09 AM

Originally Posted by azoomer

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

Thread: image resize with window (maintain aspect ratio)

Thread Tools

Search Thread

image resize with window (maintain aspect ratio)

Using MickFromSydney's code for multiple objects.

Bookmarks

Bookmarks

Posting Permissions