javascript - 裁剪响应式全宽图像

Question

我必须剪裁一张横跨整个宽度的图像。以下内容对我不起作用

1. 剪辑:这需要绝对位置，这样 block 元素就不会堆叠在下面
2. background-position:缩放时不能正确剪裁，放大时剪裁部分会增加，反之亦然。
3. wrapper:wrapper 的高度取决于浏览器的宽度，因此它的值应该是动态的。

我使用了 setinterval 1 毫秒的 js。这样 wrapper 的高度就会不断更新。在所有情况下都能完美运行，但 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);

---

<!--two different clips of the same image-->
<div id="clip1">
<img id="banner1" src="banner.jpg">
</div>
<div id="clip2">
<img id="banner2" src="banner.jpg">
</div>

Answer 1

试试这个:

HTML

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

CSS

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

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

(也在这里:http://jsfiddle.net/N6mCw/)

想法是使用外包装来裁剪图像。如果您需要支持 IE<9，那么您必须在内部 div 中添加一个 标签并删除背景图像 CSS，而不是背景图片:

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

尽管……最好的方法是事先将图像实际裁剪为正确的纵横比!