Question

我有一个67x67像素的图像，我想缩小到45x45以适应锚点，但我不知道如何调整它。我的HTML是：

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

我的CSS是：

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

我的JS是：

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

我所有的搜索都会改变图片的大小，但需要保持45x45。有关如何将图像缩放到该尺寸的任何建议吗？

感谢您的任何提示或指示。

Answer 1

如果不使用JS，只使用带background-size的CSS？

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

看一看 here:

我用过

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

Answer 3

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

这个线程在stackoverflow上回答

javascript Image Resize

如何使用JavaScript来缩放图像以适应

3 个答案: