Dynamic Image Resizing

[bigblondguy]

I am simply trying to get an image to fit and auto-scale to the size of a table. I have tried numerous ways to get this done, but nothing seems to be working.

      
     <table id="bannerTable" >
         <tr  >
            <td id="tux" >
            </td >
            <td id="bannerSegment" >
               <p class="formatting" > Tech Savvy Services </p>
            </td>
         </tr>
      </table>

The above is one of the renditions of what I have tried in order to make it work.

#tux { border-width: 1px; border-style: solid; width:10%; text-align: center; background-repeat:no-repeat vertical-align:middle; background-image:url('Images/logo.jpg'); }
#bannerSegment { border-width: 1px; border-style: solid; width:90%; background-image:url('Images/Banner.jpg'); text-align:center vertical-align:middle; }
#bannerTable { border-width: 1px; border-style: solid;  width:100%; }

Above are the CSS definitions I am using. The internal banner and tux segments resize according to how large the browser window is. Im looking to change the logo inside tux such that it will dynamically resize depending on how large the web page is, and have it fill the entire table element <td>. A couple things I have tried dont resize the image.

[ryanbutler]

You mean resizing the space the image fills right? You couldn't dynamically re- size an image based on browser window unless you're pulling the image dynamically and even then I don't think it would work the way you're thinking.

[rproctor83]

I'm not sure how browser compatible this is, but it seems to work in modern browsers at least.

You can simply set the image width to 100&#37;... For example,

<img src='whatever.jpg' width='100%' />

This will scale the image and have it auto scale with the container. This will not produce a clean image scale, as it is scaled by the browser... But, it should work.