window resize fit image width and height

Hello experts,

I will try explain in short what I am trying to achieve and hopefully I will find a resolution :-)

I have a slideshow with few images. I am trying to fit the images to the browser height and then determine the width of the image accordingly.

The images are around 2000 pixels wide and 1333 pixels height.
So again it should fit to the height of the browser window and then calculate the width of the image in order to keep the right ratio.

I am trying to "play" with the window resize (below code) yet have no clue how to add the width calculation... I hope this is somehow the right direction?

$(window).resize(function() {
		$('.slideshow img').height($(window).height());		
	});
	$(window).trigger('resize');

Open in new window

RefaelAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott FellDeveloper & EE ModeratorCommented:
Are you trying to mimic this http://buildinternet.com/project/supersized/

Check out the demo. I have used this and I think there is a little creative stretching depending on the size.

Do you always want the width to be the exact correct proportion to the height?
RefaelAuthor Commented:
Hi Thank you.,

No this is not a full window slideshow. here is what i am trying to do exactly good example is at: philiphousenyc.com you will see how the height always keep with the browser the width is not touched.
GaryCommented:
The easiest way to do this is set the image as a background

http://jsfiddle.net/GaryC123/LExPP/2/
Get Blueprints for Increased Customer Retention

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

MurfurFull Stack DeveloperCommented:
Try this function from http://ericjuden.com/2009/07/jquery-image-resize/


$(document).ready(function() {
    $('.story-small img').each(function() {
        var maxWidth = 100; // Max width for the image
        var maxHeight = 100;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $(this).width();    // Current image width
        var height = $(this).height();  // Current image height

        // Check if the current width is larger than the max
        if(width > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }

        // Check if current height is larger than max
        if(height > maxHeight){
            ratio = maxHeight / height; // get ratio for scaling image
            $(this).css("height", maxHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
            height = height * ratio;    // Reset height to match scaled image
        }
    });
});

Open in new window

RefaelAuthor Commented:
This is not right because:

In this website i gave you try to resize the browser from bottom to top...  the ntry to right to left and you see the difference...
GaryCommented:
Tad confused by what you mean by height always keep with the browser the width is not touched
My example will only show the height part of the image that can be visible without resizing the height, and the width is fluid showing/hiding more/less of the image as you resize the browser.
If you are trying to get the image to resize to the height of the browser you will run into a problem with the width.
MurfurFull Stack DeveloperCommented:
Change it to reassess every time you resize:
$(window).bind('resize', function() {

Open in new window

Sar1973Commented:
If you want to resize to a certain number of pixels see http://www.w3schools.com/jsref/met_win_resizeto.asp.
Scott FellDeveloper & EE ModeratorCommented:
>In this website i gave you try to resize the browser from bottom to top...  the ntry to right to left and you see the difference...

That is because the sample site is build on a responsive grid.   I like using bootstrap for this.  Take a look at this example and narrow your browser and notice how things move around.

http://getbootstrap.com/examples/jumbotron-narrow/

We can give you an example like this for your site as well, but it does mean putting little more thought into how your page transforms from 1200px to 700px to smartphone.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RefaelAuthor Commented:
Thanks guys. its been a while a i know :-)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.