title: Stretch Image to Fit 100% of Div Height and Width
body: <p>I have a div with the following CSS</p>
  
  <pre><code>#mydiv{
      top: 50px;
      left: 50px;
      width: 200px;
      height: 200px;
  }
  </code></pre>
  
  <p>and my HTML looks like this</p>
  
  <pre><code>&lt;div id = "mydiv"&gt;
      &lt;img src = "folder/file.jpg" width = "200px" height = "200px"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd like my web image to always be the same size (in a 1:1 aspect ration) no matter what the resolution of the actual image is.  If my actual image files are square (with 1:1 ratio) then this isn't a problem.  But if the actual image files are not square then the displayed web image do stretch to 100% of both the div's height and width (in this case 200px).  </p>
  
  <p>How do I get different image sizes to fit to my DIV?</p>