title: How can I resize an image and a table at the same time?
body: <p>I want to resize an image inside a table or a div according to the height of the screen.</p>
  
  <p>While I use all different kind of codes to resize the image, it always gains some sort of absolute positioning stepping outside the table or the div, instead of dragging them along with.</p>
  
  <ol>
  <li>The proportion of the image must be respected.</li>
  <li>The entire image must be always visible on every screen resolution
  (no scroll).</li>
  <li>The top cell of the table must have always the same width of the resized image, but a fixed high.</li>
  <li>My image ("1.jpg") has originally 800x600.</li>
  </ol>
  
  <p>My code:</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Test&lt;/title&gt;
  
  &lt;style&gt;
  
  html, body, table { height:100%; width:auto; }
  
  .stretch {
      height:100%;
      width:auto;
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;table border="0" cellspacing="0" cellpadding="0"&gt;
    &lt;tr&gt;
      &lt;td height="125px" bgcolor="#CCCCCC"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;img src="images/1.jpg" class="stretch" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  </code></pre>