調整大小時，IMG標簽作為背景封面大小不起作用

Question

作為標題，我有兩個帶有標簽圖像的html框，以便獲得具有100％寬度和高度的css背景大小的覆蓋結果，我在相對位置上放置了一個透明圖像，有點粗糙，但是實現了目的是沒有尺寸固定的盒子。 （我使用了jquery和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>

它可以完美地工作，但是如果您調整窗口的大小，則在刷新頁面之前它將無法工作。

我試圖將其全部封裝在一個onresize函數中，但是我沒有做到這一點。

有想法嗎

非常感謝

結果： https : //jsfiddle.net/yhshkxrq/17/

完整的： https : //jsfiddle.net/yhshkxrq/17/embedded/result/#Result

Answer 1

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