Solved

window resize fit image width and height

Posted on 2014-01-07
11
560 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
  • 3
  • 3
  • 2
  • +2
11 Comments
 
LVL 52

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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 52

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Wordpress Taxonomy 2 27
Problem to refer to value 8 46
Getting selected value of a dropdown with jquery 7 34
Best Way to remove the port from a URL? 15 32
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…

776 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