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

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

2 个答案: