Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change Width & Height Dynamically of Div

    Hi. This script changes the image, I wanted to know if there is a way to automatically resize the div's height and width based on the actual image proportions.

    Thank you

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Switch Picture</title>
    
    <script type="text/javascript">
    function changeIt(imageName,objName)
    {
    var obj = document.getElementById(objName);
    var imgTag = "<img src='"+imageName+"' width='100%' height='100%' border='0' />";
    obj.innerHTML = imgTag;
    return;
    }
    </script>
    
    </head>
    
    <body>
    
    <div id="change" style="width:200px; height:200px;">
    <img src="cat.jpg" width="100%" height="100%" border="0" />
    </div>
    
    <br/>
    
    <a href="#" onclick="changeIt('dog.jpg','change');">Switch to Dog Pic</a>
    
    </body>
    
    </html>

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Posts
    301
    Thanks
    2
    Thanked 30 Times in 30 Posts
    You are using percentages because you don't know the height and width of the next image? Whether you use some proportional aspect, or fit the border right to the image, I believe all modern browsers include "width" and "height" properties for "img" elements. Just give it an "id" attribute so you can find it. And you should be able to read height/width and adjust your border as you wish.

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, that's very helpful advice


  •  

    Posting Permissions

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