изменить размер div в зависимости от размера изображения с помощью jquery

У меня есть изображение и цветное наложение div поверх моего изображения. Я получаю ширину и высоту изображения, используя jquery, чтобы установить ширину и высоту цветного наложения div. это работает нормально.

вот мой html:

<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

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

теперь я пытаюсь при изменении размера окна, чтобы наложение получило тот же размер моего изображения, используя $(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, чтобы увидеть его в действии:


javascript image jquery css window-resize
person mmdwc    schedule 16.09.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы должны просто вызвать load событие image.

$(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');

ДЕМО

person Satpal    schedule 16.09.2014