SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2005
    Location
    moose village
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resize image to fit table as its being resized?

    is there any way to auto resize an image thats in a table, if the weight of the table is smaller to resize the image inside to be smaller?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    function 
    ReSizeImg(){
     var 
    Cnt=0
     
    var TDImgAry=new Array();
     var 
    tds=document.getElementsByTagName('TD');
     for (
    i=0;i<tds.length;i++){
      
    imgs=tds[i].getElementsByTagName('IMG');
      if (
    imgs.length>0){
       
    TDImgAry[Cnt]=tds[i];
       
    TDImgAry[Cnt][0]=tds[i];
       
    TDImgAry[Cnt][3]=imgs[0];
       
    TDImgAry[Cnt][4]=imgs[0].offsetWidth;
       
    TDImgAry[Cnt][5]=imgs[0].offsetHeight;
       
    TDImgAry[Cnt][6]=TDImgAry[Cnt][5]/TDImgAry[Cnt][4];
       
    TDImgAry[Cnt][3].width='10';
       
    TDImgAry[Cnt][3].height='10';
       
    Cnt++;
      }
     }
     for (
    i0=0;i0<TDImgAry.length;i0++){
      
    TDImgAry[i0][1]=TDImgAry[i0][0].offsetWidth;
      
    TDImgAry[i0][2]=TDImgAry[i0][0].offsetHeight;
      if (
    TDImgAry[i0][4]>TDImgAry[i0][1]){
       
    TDImgAry[i0][3].style.width=TDImgAry[i0][1];
       
    TDImgAry[i0][3].style.height=TDImgAry[i0][3].width*TDImgAry[i0][6];
       
    TDImgAry[i0][4]=TDImgAry[i0][3].offsetWidth;
       
    TDImgAry[i0][5]=TDImgAry[i0][3].offsetHeight;
      }
      if (
    TDImgAry[i0][5]>TDImgAry[i0][2]){
       
    TDImgAry[i0][3].style.height=TDImgAry[i0][2];
       
    TDImgAry[i0][3].style.width=TDImgAry[i0][3].height/TDImgAry[i0][6];
      }
     }
    }
    //-->
    </script>

    </head>

    <body onload="ReSizeImg();" >


    This script accounts for one image in a TD and no other elements<br>

    <table width="200" height="100" border="1">
      <tr height=50% >
        <td width=50%><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" ></td>
        <td width=50% >.</td>
      </tr>
      <tr height=50% >
        <td>.</td>
        <td><img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" ></td>
      </tr>
    </table>
    <br>
    Original Images
    <br>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" ><br>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" >
    </body>

    </html> 
    If you resize the table run the ReSize() function again

  3. #3
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simply sizing your image in percentages should allow it to scale with the table cell it is in, depending how the table is being resized.


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
  •