PDA

View Full Version : 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 (http://www.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:


<!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
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 (http://www.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>
<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
...
Although the vertical centre is not catered for...


After a couple of initial mishaps I got it to work in a table:



<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 (http://azoomer.com/Ufis-fit-screen/)

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
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 (http://azoomer.com/Ufis-fit-screen/)
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

jscheuer1
11-23-2010, 05:25 AM
From azoomer's demo page addition highlighted. Don't miss the added comma (red) after the togglerid value:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", ""],
["http://i29.tinypic.com/xp3hns.jpg", ""],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
oninit: function(){
this.setting.$wrapperdiv.unbind('mouseenter');
}
})

kekeTex
11-23-2010, 04:05 PM
works great now. thank you so much!

kekeTex
11-23-2010, 04:11 PM
Is there a way to add the option that whenever you click on the current picture that is displaying it goes to the next one?

thx

jscheuer1
11-23-2010, 10:01 PM
Well yeah, but then what? Normally once the slideshow goes into manual mode it stays there. There can be a resume button. But with the whole thing taking up the whole screen, where would that go? Is there some other way you would want the user to signify a desire to resume auto rotation? Or you could have it auto resume after so many seconds if there aren't additional clicks.

But, since the next image is what they're going to get anyway if they wait a few seconds or less, what's the point?

I don't mean to be negative. I don't really think I am. I am a bit mystified at the overall effect you are going for here. Could you lay it all out for me rather than (as appears to be the case) asking for it a bit at a time.

aryans
01-10-2011, 09:47 PM
Is there any way to have next & prev buttons on the image while the slideshow is on?
I would really appreciate your reply.