title: CSS scale down image to fit in containing div, without specifing original size
body: <p>I want to have a website where I can upload images of different sizes to be displayed in a jquery slider.
  I can't seem to fit (scaling down) the image in a containing div. Here's how I'm intending to do it</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt; 
  &lt;link rel="stylesheet" type="text/css" href="Imtest.css"/&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="wrapper"&gt; 
  
  &lt;div id="im"&gt;&lt;img src="Images/Scarpa2_1.jpg" /&gt;&lt;/div&gt;
  
  &lt;/div&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the CSS</p>
  
  <pre><code>#wrapper {
      width: 400px;
      height: 400px;
      border: 2px black solid;
      margin: auto;
  }
  
  #im {
      max-width: 100%;
  }
  </code></pre>
  
  <p>I've tried to set the max-width of my image to 100% in CSS. But that doens't work. </p>