Img tag as background cover size not work when resize

Question

As a title, I have two html boxes with tag images arranged in order to get the css background-size cover result, with 100% width and height, I put a transparent image on the relative position, a bit rough, but I achieved the purpose of not having a box with fixed dimensions. (I used jquery and bootstrap):

.box {
width: 100%;
height: 100%;
margin: 0 auto;
border: 1px solid;
position: relative;
overflow: hidden
}
img {
position: absolute;
z-index: -1;
}
img.img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0
}

<div class="container" style="width: 100%">

<div class="row">

 <div class="col-xs-6">
    <div class="box">
    <img class="image" src="http://placehold.it/1440x1440">
    <img class="img" src="1000.png">
    </div>
 </div>

 <div class="col-xs-6">
    <div class="box">
    <img class="image" src="http://placehold.it/2560x1440">
    <img class="img" src="1000.png">
    </div>
 </div>

    </div>
  </div>

It works perfectly, but if you resize the window, it will not work, until the page is refresh.

I tried to enclose it all in an onresize function, but I did not work to do it.

Some idea?

Thanks so much

result: https://jsfiddle.net/yhshkxrq/17/

full : https://jsfiddle.net/yhshkxrq/17/embedded/result/#Result

Answer 1

使用$( window ).resize函数，更新小提琴中的代码