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?
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');ASKER
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.
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.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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...
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...
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.
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.
Change it to reassess every time you resize:
$(window).bind('resize', function() {
If you want to resize to a certain number of pixels see http://www.w3schools.com/jsref/met_win_resizeto.asp.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks guys. its been a while a i know :-)
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?