Javascript 剪裁响应性全宽图像

我必须剪辑一幅全宽的图像。以下事情对我不起作用

剪辑：这需要绝对位置，这样块元素就不会堆叠在下面

背景位置：放大时剪辑不正确放大时剪辑部分增加，反之亦然

包装：包装高度取决于浏览器宽度，因此其值应该是动态的

我使用js，设置间隔为1毫秒。因此，包装高度会不断更新。在所有场景中都可以完美工作，但setinterval是一种糟糕的做法。因此，请建议一种更干净的方法来实现这一点

document.onreadystatechange = setInterval(function () {
  if (document.readyState == "complete") {
    brow_width = document.body.clientWidth;

    var h1 = (brow_width/7);
    document.getElementById("clip1").style.opacity = "1";
    if(brow_width > 700){
    document.getElementById("clip1").style.height= h1;
    }
    else{
    document.getElementById("clip1").style.height= 110;
    }

    var h2 = (brow_width/33.33);    
    document.getElementById("clip2").style.opacity = "1";
    if(brow_width > 700){
    document.getElementById("clip2").style.height= h2;
    document.getElementById("banner2").style.top= h2 - brow_width*0.35;
    }
    else{
    document.getElementById("clip2").style.height= 21;
    document.getElementById("banner2").style.top= -220;
    }   
}
},1);

---

试试这个：

HTML

<div class="banner">
  <div class="bannerImg"></div>
</div>

（这里也有：）

---

想法是使用外层包装来裁剪图像。如果您需要支持IEA，只是一个疑问，您想创建一个响应横幅吗？或者特别是“剪辑”那个横幅？@mageshkumar我想剪辑一个图像，剪辑的部分应该是全宽的。我正在分享我的网页url，这样你就可以看看我想要实现什么。编码html:，模板：是您试图剪辑背景图像的内容吗？您可以指定100%的宽度和绝对高度，然后设置

溢出：隐藏到图像上。我相信您可以设置一个边距，以便获得正确的图像片段来模拟模板。@RDrazard如果宽度为%，高度为绝对值，它不会拉伸图像吗？宽度和高度应适用于背景图像的容器。实际上，我希望同一图像的多个裁剪实例，以便裁剪同一图像多次将增加http请求。所以我想这样，谢谢你的回答：）
<div class="banner">
  <div class="bannerImg"></div>
</div>

.banner {
  position: relative;
  padding-bottom: 15%;
}

.bannerImg {
  background-image: url(...);
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div class="banner">
    <div class="bannerImg">
        <img src"…" />
    </div>
</div>