title: How to use JavaScript to scale an image to fit
body: <p>I have a 67x67 px image that I would like to scale down to 45x45 to fit into an anchor but I do not know how to adjust it.  My HTML is:</p>
  
  <pre><code>&lt;a class="CompareProfilePic" id="CompareProfilePic1" href="#"&gt;
     &lt;span id="CompareProfilePicActionBtn1" class="autocenter"&gt;
     &lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>My CSS is:</p>
  
  <pre><code>a.CompareProfilePic {
     height: 45px;
     width: 45px;
     border-radius: 50%;
     float: left;
     margin-right: 10px;
     cursor: default !important;
  }
  </code></pre>
  
  <p>And my JS is:</p>
  
  <pre><code>document.getElementById('CompareProfilePic1').style.cssText = 'background-image: url(img/pic1.jpg)';
  </code></pre>
  
  <p>All my searches led to changing the size of what is holding the image, but that needs to stay 45x45.  Any suggestiosn on how to scale the image to that size?</p>
  
  <p>Thanks for any tips or pointers.</p>