Question

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

现在在代码下面工作：

<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函数。

非常感谢。

Answer 1

您没有正确宣布该功能。

function resize(){
  var img = new Image(); 
  img.src = this.src; 
  if(img.width <= 680){ 
    ...
  }
}

Answer 2

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

Image

为什么我不能使用此功能更改图像的宽度？

2 个答案: