调整大小

Question

作为标题，我有两个带有标签图像的html框，以便获得css背景大小的封面结果，100％宽度和高度，我在相对位置上放置了一个透明图像，有点粗糙，但是我达到了没有固定尺寸的盒子的目的。 （我使用了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功能， 在fiddle

中更新了您的代码