How to use JavaScript to scale an image to fit

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.

score 1 · Answer 1 · answered Sep 10 '14 at 16:09

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; /*<----*/
}

score 0 · Accepted Answer · answered Sep 10 '14 at 16:11

0

Take a look here:

i used

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

answered Sep 10 '14 at 16:11

Giannis Grivas

3,374
1
18
38

Ah, that is perfect! Can't believe it is so easy but I could not find that anywhere else. Thank you! – Scott Sep 10 '14 at 16:23

score -1 · Answer 3 · edited May 23 '17 at 11:49

-1

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

answered by this thread on stackoverflow

javascript Image Resize

edited May 23 '17 at 11:49

Community

1
1

answered Sep 10 '14 at 16:08

mordondro

59
1
11

whats wrong with this answer? he asked about js, no? – mordondro Sep 10 '14 at 20:13

How to use JavaScript to scale an image to fit

3 Answers3