Solved

window resize fit image width and height

Posted on 2014-01-07
11
576 Views
Last Modified: 2014-01-31
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
Comment
Question by:Refael
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +2
11 Comments
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39763771
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
 

Author Comment

by:Refael
ID: 39763790
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 167 total points
ID: 39763817
The easiest way to do this is set the image as a background

http://jsfiddle.net/GaryC123/LExPP/2/
0
Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

 
LVL 11

Assisted Solution

by:Murfur
Murfur earned 166 total points
ID: 39763829
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
 

Author Comment

by:Refael
ID: 39763837
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
 
LVL 58

Expert Comment

by:Gary
ID: 39763844
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
 
LVL 11

Expert Comment

by:Murfur
ID: 39763859
Change it to reassess every time you resize:
$(window).bind('resize', function() {

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39763868
0
 
LVL 9

Expert Comment

by:Sar1973
ID: 39764833
If you want to resize to a certain number of pixels see http://www.w3schools.com/jsref/met_win_resizeto.asp.
0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 167 total points
ID: 39764858
>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
 

Author Closing Comment

by:Refael
ID: 39825401
Thanks guys. its been a while a i know :-)
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question