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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Posts
    342
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How To Shrink An Image Into Thumbnail?

    Hi,
    I am loading images from server. The webpage loads pages of images, but I need to shrink them into thumbnails. I don't plan to make real thumbnail pictures for these images, I just load them fullsize but show them in smaller size. I can't set a fix size in html tag because all images are in different sizes and I use the same code for all pages.

    I can do the following:

    imgElement = document.createElement("IMG");
    imgElement.src = "mypic.jpg"
    imgElement.style.width = 90 + 'px';
    imgElement.style.height = 100 + 'px';

    But I want the thumbnail has the same aspect ratio as the original one. But since the image isn't loaded yet, I can't find out the dimension of the original image.

    How can I go around this problem?

    Many thanks.
    Last edited by dealmaker; 08-16-2005 at 01:57 AM.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I guess that there is no need to create the element. Just simply hidden the visiblity till the new size is set.

    Here's a simple example:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript">
    var 
    sqr 1/3//the "squeeze" ratio
    function reSize(){
    var 
    oImg document.getElementById('mypic');
    var 
    oImg.offsetHeight;
    var 
    oImg.offsetWidth;
    oImg.style.width Math.round(w*sqr)+'px';
    oImg.style.height Math.round(h*sqr)+'px';
    oImg.style.visibility 'visible';
    }
    onload reSize;
    </script>
    <style type="text/css">
    <!--
    #mypic{
    visibility:none
    }
    -->
    </style>
    </head>
    <body>
    <img id ="mypic" src="00.jpg">
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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