크기 조정 div 이미지 크기에 따라 jquery를 사용합니다.

Question

이미지 위에 색상이 지정된 div 오버레이가 있습니다. jquery를 사용하여 이미지의 너비와 높이를 가져오고 컬러 오버레이 div의 너비와 높이를 설정합니다. 잘 작동합니다. 오버레이가 동일하게 얻을 창 크기를 조정하면 내가 노력하고있어 지금

$(".image").load(function(){ 
    var image_h=this.height, 
    image_w=this.width; 
    $(".overlay").height(image_h); 
    $(".overlay").width(image_w); 
}); 

<div class="image_overlay"> 
    <div class="overlay"></div> 
    <img src="http://us.123rf.com/400wm/400/400/1xpert/1xpert1101/1xpert110100083/8712640-rainbow-cubes-3d-render-image.jpg" class="image"> 
</div> 

<div class="image_overlay"> 
    <div class="overlay"></div> 
    <img src="http://4.bp.blogspot.com/-BrLngyC1Bto/UpO-IY1kcNI/AAAAAAAALqA/1bSQRy3G_gU/s1600/Image-b%C3%A9b%C3%A9-facebook-8.jpg" class="image"> 
</div> 

내 CSS를

.image_overlay{ 
    position:relative} 

.image{ 
    z-index:1; 
    width:50%; 
    height:auto; 
} 

.overlay{ 
    background-color:rgba(13, 181, 30, 0.8); 
    position:absolute; 
    z-index:2; 
} 

내 JQuery와 : 여기

내 HTML입니다 $ (window) .on ('resize', function() ...)을 사용하여 이미지의 크기를 조정할 수 있지만 어떻게 처리 하는지를 알 수는 없습니다 ...

여기가 내가 시도한 것입니다. http://jsfiddle.net/o4ngj624/

아무도 도와 줄 수 있습니까? 여기

$(document).ready(function(){ 

    $(".image").load(function(){ 
     var image_h=this.height, 
     image_w=this.width; 
     $(".overlay").height(image_h); 
     $(".overlay").width(image_w); 
    }); 

    $(window).trigger('resize'); 

}); 

$(window).on('resize',function() { 

    var image_h=this.height, 
    image_w=this.width; 
    $(".overlay").height(image_h); 
    $(".overlay").width(image_w); 
}); 

행동에 그것을보고 Jsfiddle입니다

당신의 도움을 주셔서 감사 많은 :

Answer 1

당신은 단지 image의 load 이벤트를 트리거합니다.

$(document).ready(function() { 
    $(".image").load(function() { 
     var image_h = this.height, 
      image_w = this.width; 
     //Use prev to find previous overlay 
     $(this).prev(".overlay").height(image_h).width(image_w); 
    }); 
}); 

$(window).on('resize', function() { 
    $(".image").trigger('load'); //Trigger load event of image 
}).trigger('resize'); 

DEMO