title: Resizing an image so that it fits in it's container
body: <p>I have a div <code>profile_pic</code> which has the following CSS:</p>
  
  <pre><code>#profile_pic{
      position:absolute;
      border:1px solid #E1E3E4;
      left:25px;
      top: 25px;
      width: 200px;
      height: 200px;  
  }
  </code></pre>
  
  <p>Since profile picture for my application can be any image (of any size), the div or image, should be flexible to adapt to one another. I have tested a profile picture with the dimensions of <code>300px width</code> and <code>300px height</code> and the image renders perfectly in the the div. However, when I upload a picture with say, <code>550px width</code> and <code>400px width</code> the image is appearing "squashed" which is understandable. </p>
  
  <p>There are two options, 1. resizing the image so that the whole image appears in the div and 2. cropping the image so that the image adapts to the div size. I do not mind adopting either of these approaches but I am unable to implement how these approaches in code. </p>
  
  <p>I have tried to set:</p>
  
  <pre><code>#profile_pic {width: 50%}
  #profile_pic img {width:100%}
  </code></pre>
  
  <p>But it just does not work. How can I get the div (or image) to always fit in the div's size without the image losing it's quality?</p>