• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 594
  • Last Modified:

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

0
Refael
Asked:
Refael
  • 3
  • 3
  • 2
  • +2
3 Solutions
 
Scott Fell, EE MVEDeveloper & 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?
0
 
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.
0
 
GaryCommented:
The easiest way to do this is set the image as a background

http://jsfiddle.net/GaryC123/LExPP/2/
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
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

0
 
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...
0
 
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.
0
 
MurfurFull Stack DeveloperCommented:
Change it to reassess every time you resize:
$(window).bind('resize', function() {

Open in new window

0
 
Sar1973Commented:
If you want to resize to a certain number of pixels see http://www.w3schools.com/jsref/met_win_resizeto.asp.
0
 
Scott Fell, EE MVEDeveloper & 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.
0
 
RefaelAuthor Commented:
Thanks guys. its been a while a i know :-)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
  • 3
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now