왜이 기능을 사용하여 이미지 너비를 변경할 수 없습니까?

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

onload 이벤트를 이미지 요소에 넣을 수는 없으므로 Image의 인스턴스로 가야합니다. 좋은 시작을 얻으려면 this (또는 아래의 참조 코드)을 확인하십시오. 먼저 Image의 인스턴스를 만들어서로드 할 때 감지 할 수있었습니다. 그런 다음 이미지의 onload을 확인하고 크기가 200보다 큰지 확인하고 크기가 0보다 큰지 확인하십시오. 요소, 이 아닌 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"; 
    } 
}; 

Answer 2

함수를 올바르게 선언하지 않았습니다.

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