SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resize image based on parent container

    Hi everyone, been a whilse since I've been around.

    Does anybody know if it is possible to resize an image whilst maintaining it's aspect ratio, based on the parent divs width and height? I want it to fit on screen so as not to cause scrolling, and shrink it if the width or height are too big.

    I can't even dtermine how best to get the height/width of the div itself as they are dynamic. Any hints?

    Thanks,
    Jordan

  2. #2
    SitePoint Enthusiast navtej's Avatar
    Join Date
    May 2006
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by J Windebank
    Hi everyone, been a whilse since I've been around.

    Does anybody know if it is possible to resize an image whilst maintaining it's aspect ratio, based on the parent divs width and height? I want it to fit on screen so as not to cause scrolling, and shrink it if the width or height are too big.

    I can't even dtermine how best to get the height/width of the div itself as they are dynamic. Any hints?

    Thanks,
    Jordan
    Hi you an get the height and width of the div as:

    document.getElementById("your_div_id).offsetHeight
    document.getElementById("your_div_id).offsetWidth

    thoug I dont know how to fix the ratio thing, I think you can use the parent height and width to develop some formulla

    thanks
    hope it can be of some support

    navtej

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2004
    Posts
    1,647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this.style.width = this.parentNode.style.width;
    cheers

  4. #4
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. Perfect.


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
  •