jquery 크기 조정 기능이 예상대로 작동하지 않습니다.

Question

<img> 태그가있는 컨테이너 요소가 있습니다. 이미지 너비는 100 %이고 높이는 auto입니다. 컨테이너의 오버 플로우는 hidden으로 설정되고 max-height 및 min-height도 있습니다. 아이디어는 최대 및 최소 중단 점 내에서 이미지의 컨테이너 높이를 결정하게하는 것입니다.

따라서 컨테이너의 상대 높이가 있습니다. 유체가 전환되기 위해서는 resize 이벤트의 높이를 재설정해야합니다 (복잡한 이유 때문에 img 자체가 높이를 설정하지 않고 계산되고 자바 스크립트를 통해 변경됩니다). 이 잘 작동하고 창의 크기를 조정할 때 모든 작동합니다.

그러나 resize 이벤트에있는 논리 중 일부는로드 이벤트에서도 실행하려고합니다. 그래서, 그냥로드 내에서 크기를 조정할 것이라고 생각했습니다.

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

그러나 이것은 작동하지 않았습니다. 이 코드를 사용하면 수동으로 한 픽셀 만 창 크기를 조정하면 포함 요소가 적절하게 배율 조정됩니다 (정확히 재설정 된 높이에 맞게로드에서 계산 된 높이와의 차이는 200px입니다).

분명히, 어떻게 작동하는지에 대한 나의 이해가 잘못되었습니다. 이렇게하기 전에 다른 이벤트를 호출하여 이벤트를 시작하고 다른 이벤트를 트리거합니다. 내가 원하는 것을 어떻게 성취 할 수 있습니까?

Answer 1

문제점이 무엇인지 알 수 없습니다. 내 접근 방식을 변경하고 load에서 resize 이벤트를 호출 할 필요가없는 다른 해결책을 발견했습니다.

Answer 2

이 .ready 대신 .load 여기

$(window).ready(function); 

의 시도이다 jsfiddle

Answer 3

여전히 궁금 할 것입니다 무슨 실제로 resize을 실행하는 데 창을하지만 다른 방법을 다시 크기에 의해 달성되는 것 :

$(window).load(function() { 
    $(this).trigger('resize'); 
});