无法使用javascript更改图像的高度和宽度

Question

嘿，我试图改变我从输入中读取的图像的高度和宽度，并试图将其显示回来，这是代码：

function readanddisplayImage(input){
  if(input.files && input.files[0]){         
     var filereader = new FileReader(); 
     filereader.readAsDataURL(input.files[0]);         
     filereader.onload = function(reader){
            var image = new Image();
            image.src = reader.target.result;     
            image.width = 150;
            image.height = 150;       
            //It works fine till this line but in the next line image is displayed without the size changed. 
            $("#profilePicture").css("background-image", "url('" + image.src + "')");             
            alert(image.width +"  "+ image.height);
     }
  }    
}

有人能告诉我我哪里出了问题吗？ThankYou。

Answer 1

像这样改变图像的宽度和高度不会影响作为CSS背景的图像.尝试使用CSS更改背景图像尺寸。

 filereader.onload = function(reader){
        $("#profilePicture").css("background-image", "url('" + reader.target.result + "')").css("background-size", "150px 150px");

 }

Answer 2

背景图像的大小由CSS属性background-size管理--例如，将其设置为150px 150px以获得所需的效果。