2

仅当图像宽度大于 200 像素时，我才尝试将图像的宽度更改为 200 像素（固定大小），否则我想保留其原始宽度。

现在下面的代码有效：

<img src="../images/browse-files.png"  style="width:200px" onload="var img = new Image(); img.src = this.src; if(img.width <= 680){ var imgW= '680' + 'px' ; this.style.width =imgW;} "/>

但下面的代码没有： 

<script type="text/javascript">
resize(){
var img = new Image(); 
img.src = this.src; 
    if(img.width <= 680){ 
        var imgW= '680' + 'px' ; 
        this.style.width = imgW;
    }
return this.style.width;                            
}
</script>

<img src="../images/browse-files.png"  style="width:200px" onload="return resize() "/>

我想知道最后一种方法我做错了什么。我更喜欢最后一个方法，因为我想在一个 .js 页面上包含所有 JavaScript 函数。

非常感谢。

4

2 回答 2

2

您没有正确声明该功能。

function resize(){
  var img = new Image(); 
  img.src = this.src; 
  if(img.width <= 680){ 
    ...
  }
}
于 2012-08-25T17:21:20.677 回答
0

您不能将onload事件放在这样的图像元素上，它必须在Image. 查看此（或下面的参考代码）以获得良好的开始。我首先创建了一个实例，Image以便我可以检测到它何时加载。然后，onload检查图像的大小是否大于 200。如果是，则获取原始图像元素，而不是 的实例Image，并调整其大小。

var image = document.getElementById("image");

var img = new Image();
    img.src = image.src;

img.onload = function(){
    if (img.width > 200) {
        image.style.width = "200px";
    }
};
于 2012-08-25T17:15:06.403 回答