SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Image Scaling

  1. #1
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    Swindon
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Scaling

    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. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,837
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    @billybrag

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

    PHP Code:

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

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

      <
    div style=width:700pxtext-align:center'>
          <img src='
    wherever-it-is.jpg' style='width:100%; max-width:700pxborder:0' alt='#' />
      
    </div
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Patche on earning Member of the Month for July 2014

  3. #3
    Non-Member
    Join Date
    Jul 2012
    Posts
    2
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by billybrag View Post

    Hopefully that makes sense and is easily achievable in jQuery?
    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. #4
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    Swindon
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tetra View Post
    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.
    Thanks Tetra - do you have an example of what you mean?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •