Image Scaling

JavaScript
1

Hi,

Im trying to do something that I think is very easy but I dont know jQuery very well and Im not sure where to start

What I am trying to do is have it so that on a page I display an image in a div that is 700px wide - then if the image is taller than the browser window it is scaled down in size so that it is viewable - this means the user will always see the whole picture on page load.

Hopefully that makes sense and is easily achievable in jQuery?

Thanks all

Mike

2

@billybrag

Instead of using jQuery, experiment with CSS image size percentages and min and max width or heights.



  <div style=width:700px; text-align:center'>
      <img src='wherever-it-is.jpg' style='width:100%; border:0' alt='#' />
  </div>

  <div style=width:700px; text-align:center'>
      <img src='wherever-it-is.jpg' style='width:100%; min-width:700px; border:0' alt='#' />
  </div>

  <div style=width:700px; text-align:center'>
      <img src='wherever-it-is.jpg' style='width:100%; max-width:700px; border:0' alt='#' />
  </div>
3

and it’s even easier with plain javascript and you will run much less code in the bg then if you use jquery.

Basically, all you need to do is get the vertical viewport size of the user’s browser (you can google it if you don’t know how). Preload the image into a new Image object (not img - again google if not sure) so you can get the actual physical height and width in px of the image. If the viewport size is larger than the height of the image then reset the <img> height to the height of the viewport and set the <img> width to the pro-rataed width of the Image Object to maintain the image’s original aspect ratio. There are plenty of examples of resizing images to fit in a box on the www.

4

Thanks Tetra - do you have an example of what you mean?