title: How to display large image properly in fixed size div?
body: <p>I have a lot of large images with different size(300x400, 500x300...). And I want to display those large images properly scaled within a fixed size div. </p>
  
  <p>For example, I have a 200x200 div, and a 500*300 image.</p>
  
  <pre><code>|--------------------|
  |                    |
  |                    |
  |   div(200x200)     |
  |                    |
  |                    |
  |--------------------|
  
  |--------------------------------|
  |                                |
  |                                |
  |   image(500x300)               |
  |                                |
  |                                |
  |                                |
  |                                |
  |--------------------------------|
  </code></pre>
  
  <p>So the width of the image will be 200 pixels and height will proportionally scale and become 300 * 200 / 500 = 125 pixels. The image will look smaller, but it keeps its proportions and will still look good.</p>
  
  <pre><code>|--------------------|
  |      Blank         |
  |--------------------|
  |                    |
  |   Image(200x125)   |     # div (200x200)
  |                    |
  |--------------------|
  |      Blank         |
  |--------------------|
  </code></pre>
  
  <p>How can I do that? Is there any javascript libs to do this?</p>