www.webdeveloper.com
Results 1 to 3 of 3

Thread: Dynamic Image Resizing

  1. #1
    Join Date
    Mar 2010
    Posts
    8

    Dynamic Image Resizing

    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.

    Code:
          
         <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.

    Code:
    #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.

  2. #2
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    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.

  3. #3
    Join Date
    Mar 2010
    Posts
    128
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles