div를 채우기 위해 이미지 크기 조정

Question

다음과 같이 이미지를 기울이지 않고 컨테이너 div를 채우기 위해 이미지의 크기를 조정할 수 있습니다. 그것은 CSS를 사용하여 높이로 채우고 이미지가 div를 채우기에 충분히 넓지 않으면 함수는 width를 사용하여 div를 채우고 높이를 auto로 설정합니다. 문제는 코드가 window.load에서만 작동하므로 사용자가주의를 기울이면 이미지로드를 볼 수 있으며 잠시 후에 변경됩니다. 그렇다면 document.ready로 작업 할 함수를 어떻게 변경합니까?

function imageResize() { 
    $(".square").each(function(){ 
    if($("img",this).width() < $(this).width()){ 
     $("img",this).css("height", "auto"); 
     $("img",this).css("width", "100%"); 
    } 
    }); 
} 

편집 : 현재 기능 document.ready 사용에 대한 문제는 이미지가 큰에있는 경우 이미지가로드되기 전에, 문서가 "준비"입니다. 그래서이 문제를 해결하기 위해 파일에서 실제 이미지의 길이와 너비를 가져온 다음 이미지를 페이지에로드해야합니다.

Answer 1

전화 준비 핸들러 내부의 기능 :

$(document).ready(function(){ 
    imageResize(); 
}); 

당신이에 전화 크기 조정의 기능 크기를 사용하려면 :

$(window).resize(function(){ 
    imageResize(); 
}); 

가 얻을 수있는 부하 핸들러 내부 코드를 사용을

$(window).load(function(){ 
    imageResize(); 
});