SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Detecting image dimensions with Javascript?

    I have some CSS/javascript which takes an image and re-sizes it on a page with a hover-over state which causes it to expand. However, this will only re-size to specific proportions (in this case 1:1).

    This is fine in the case of e.g. an 86x86 image but what I want to be able to do is detect if the image has a height greater than it's width, and if so, crop the image accordingly to make it a square.

    Is there a way of doing this with javascript?

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure. Give us a link to your page.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you go, Mike...

    If you can provide a javascript way of doing this that'd be great...

    http://www.sitepoint.com/forums/showthread.php?t=441109

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't had much time to look at your post. But I have a few suggestions.

    Even tho trying to "clip" the img with a DIV container with "overflow:hidden" should work - you might want to actually use the css clip property on the img element itself.

    Wait... I see something...

    Since .lgSize sets "position:absolute" the img is taken out of "the flow". It is possible that setting the image's container to relative might fix it.

    Also, .lgSize and .smSize don't specify the heights - why not?

    just some quick ideas


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
  •