title: Display image according div tag width and height style properties
body: <p>So I have this sample to illustrate what I need :</p>
  
  <h3>css</h3>
  
  <pre><code>.thumb-image { 
      height:450px;
      width:450px;
  }
  #image-container {
      width: 800px;
      height: auto;
  }
  </code></pre>
  
  <h3>html</h3>
  
  <pre><code>&lt;div id="image-container"&gt;
      &lt;img src="Forest.jpg" class="thumb-image" alt="Forest" style="cursor: pointer;"  /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>js</h3>
  
  <pre><code>$('.thumb-image').click(function(){
      $(this).toggleClass('thumb-image');
  });
  </code></pre>
  
  <p>Here the image is downloaded from the client at its full size. I don't use cached images and in order to simulate thumbnails, I just apply <code>width</code> and <code>height</code> to each image. However I want the user to be able to see larger image when he clicks on it, so I found that using <code>$(this).toggleClass('thumb-image');</code> is most appropriate because this gives me the ability to enlarge the image and then turn it back to the predefined dimensions which is ok. But some images are too large so I want to restrict the <code>width</code> of the displayed image to something acceptable (which in my case is 800px) and also I want to be able to control the place where the enlarged image is shown so I created a <code>&lt;div id="image-container"&gt;</code> where I want to appear my enlarged image. </p>
  
  <p>The problem is that I don't know how to force the image to occupy only the space of the div without enlarging the div as it happens now.</p>