jQuery에서 이미지 크기 조정

Question

클릭했을 때 컨테이너 div에 맞게 이미지의 크기를 자동으로 조정하는 작은 데모를 설정했습니다.

이미지의 크기를 상자 크기로 나눈 다음 너비 또는 높이에 따라 이미지의 크기를 조정하기 전에 비율이 더 높아지는 방식으로 작동합니다. 코드가 어떻게 작동하는지 살펴 보는 것이 좋습니다.

유일한 문제는 다소 번쩍 거리는 점입니다. 그것은 작동하지만 이미지 너비를 기준으로 크기를 조정하는 대신 브라우저 너비를 기반으로 크기를 계산하지만 여전히 크기 조정에 올바른 값을 전달하는 것처럼 보입니다.

아래 두 링크에서 살펴보고 브라우저 창의 크기를 조정하여 결함을 확인하십시오. overflow:hidden; 속성을 넘어서 div 외부의 이미지 크기를 볼 수 있습니다. , http://jsfiddle.net/sambeckhamdesign/NVAGG/11/embedded/result/

또는 여기에 마우스 오른쪽 버튼으로 내 머리 위로 떨어져

$('img').click(function() { 
function wr(){ 
    var imageWidth = 
    $(this).width()/250; 
    return imageWidth; 
} 
function hr(){ 
    var imageHeight = 
    $(this).height()/200; 
    return imageHeight; 
} 

function nh(){ 
    var newHeight = 
    $(this).height()/hr(); 
    return newHeight; 
} 

function nw(){ 
    var newWidth = 
    $(this).width()/wr(); 
    return newWidth; 
} 

if (wr() > hr()){ 
    $(this).css('width', nw() + 'px'); 
}else{ 
    $(this).css('height', nh() + 'px'); 
} 
}); 

Answer 1

을 jQuery를 읽어 http://jsfiddle.net/sambeckhamdesign/NVAGG/11/

보기 여기에 전체 화면 결과 :

여기에 코드를 살펴 보자 나는 이것이 폐쇄 문제라고 생각한다. 다른 함수 안에있는 함수 안에서 'this'를 참조하고 있기 때문에 'this'는 이미지에 붙이지 않고 창에 붙입니다. 함수를 업데이트하여 'this'에 대한 참조를 인수로 전달하거나 'this'로 다시 참조하는 클릭 함수에 적용되는 변수를 설정할 수 있습니다.