如何使用JavaScript缩放图像以适合

Question

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.

Answer 1

How about instead of using JS, use only CSS with background-size ?

a.CompareProfilePic {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
    cursor: default !important;
    background-image: url(img/pic1.jpg);
    background-size: 45px 45px; /*<----*/
}

Answer 2

Take a look here:

i used

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

Answer 3

 $(this).css('width','px');
 $(this).css('height','auto');

answered by this thread on stackoverflow

javascript Image Resize