Search code examples
javascripthtmlcssimagescale

How to use JavaScript to scale an image to fit

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:

<a class="CompareProfilePic" id="CompareProfilePic1" href="#">
   <span id="CompareProfilePicActionBtn1" class="autocenter">
   </span>
</a>

My CSS is:

a.CompareProfilePic {
   height: 45px;
   width: 45px;
   border-radius: 50%;
   float: left;
   margin-right: 10px;
   cursor: default !important;
}

And my JS is:

document.getElementById('CompareProfilePic1').style.cssText = 'background-image: url(img/pic1.jpg)';

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?

Thanks for any tips or pointers.

Solution

  • Take a look here:

    i used 

    document.getElementById('CompareProfilePic1').style.backgroundSize = "45px 45px";