tags:

views:

66

answers:

2

hi,

is there any javascript library for resizing the images according to browser window sizes ?

I need to consider all cases (vertical / horizonal image, vertical / horizonal browser window)

N.B. The image scale has to be the same! (no distorsions)

thanks

A: 

Not sure if this is exactly what you mean, but I used the "Supersized" jquery plugin in one of my projects (it offers diashow functionality, but if you pass only one image, it might be want you want): http://www.buildinternet.com/project/supersized/ There is also the "bgStretcher" plugin, seems to do about the same, but I havent used it yet: http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html

Max
yeah something like that, however the image here is temporanely cropped according to browser size.In my case I always want to display it all, and scale it appropriately.
Patrick
A: 

I came up with this solution. Is this insane in your opinion ? It works.. :)

var scale = 1;

                if ( imageWidth > imageHeight) {
                    if ( imageWidth > windowW) {
                        scale = windowW / imageWidth;
                        if ( (imageHeight * scale) > windowH) {
                            scale = scale * (windowH / imageHeight);
                        }
                    } else {
                        if ( imageHeight > windowH) {
                        scale = windowH / imageHeight;
                        if ( (imageWidth * scale) > windowW) {
                            scale = scale * (windowW / imageWidth);
                        }
                    }
                } 
                } else {
                    if ( imageHeight > windowH) {
                        scale = windowH / imageHeight;
                        if ( (imageWidth * scale) > windowW) {
                            scale = scale * (windowW / imageWidth);
                        }
                    } else {
                            if ( imageWidth > windowW) {
                                scale = windowW / imageWidth;
                                if ( (imageHeight * scale) > windowH) {
                                    scale = scale * (windowH / imageHeight);
                                }
                    }
                }
            }





                imageHeight = imageHeight * scale;      
                imageWidth = imageWidth * scale;
Patrick