無法使用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);
     }
  }    
}

有人可以告訴我我要去哪里錯嗎？ 謝謝。

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以獲得所需的效果。