Question

我必须剪切一个横跨全宽的图像。以下事情对我没有用处

clip：这需要绝对位置，因此块元素不会叠加在
background-position：当放大时缩放部分增加时它没有正确剪辑，反之亦然。
包装器：包装器高度取决于浏览器宽度，因此其值应该是动态的。

我使用了setinterval 1 millisec的js。这样包装纸的高度会不断更新。在所有场景中都很完美，但是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＆lt; 9而不是背景图像，则必须添加＆lt; img＆gt;内部div中的标记并删除背景图像CSS：

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

虽然......最好的方法是事先将图像裁剪成正确的宽高比！

剪切响应式全宽图像

1 个答案: