Question

我的图像上有一个图像和一个彩色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（＆＃39; resize＆＃39;，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

您应该只触发load的{{1}}事件。

image

DEMO

使用jquery根据图像大小调整div大小

1 个答案: