Solved

window resize fit image width and height

Posted on 2014-01-07
11
551 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
 
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

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…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now