剪切响应的全宽图像 [英] Clipping a responsive full width image

问题描述

我必须剪辑一张横跨全宽的图片。以下内容不适用于我

1. 剪辑：这需要位置绝对，因此块元素不会堆叠在下面


2. background-position：放大时，放大时剪辑部分不会正确剪辑。


3. wrapper：包装器高度取决于浏览器宽度，是动态的。

我使用js和setinterval 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）。 top = h2  -  brow_width * 0.35; 
} 
 else {
 document.getElementById（clip2）。style.height = 21; 
 document.getElementById（banner2） .style.top = -220; 
} 
} 
}，1）; 
  

---

  ;！ - 相同图像的两个不同剪辑 - > 
< div id =clip1> 
< img id =banner1src =banner.jpg> 
< / div> 
< div id =clip2> 
< img id =banner2src =banner.jpg> 
< / div> 
  

解决方案

尝试：

HTML

< 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，那么您需要添加一个< img>标签，并删除background-image CSS：

 < div class =banner> ¥b $ b< div class =bannerImg> 
< img src.../> 
< / div> 
< / div> 
  

虽然...最好的方法是实际裁剪图像到正确的宽高比！

I have to clip an image which spans full width. The following things didnt work for me

1. clip: this requires position absolute so the block elements dont stack below
2. background-position: it doesnt clip properly when zoomed the clipped portion increases when zoom in and vice versa.
3. wrapper: the wrapper height is dependent on the browser width so its value should be dynamic.

I used js with setinterval 1 millisec. so that wrapper height is constantly updated. works perfect in all scenarios but setinterval is bad practice. so please suggest a cleaner way to implement this.

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>

解决方案

Try this:

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;
}

(Also here: http://jsfiddle.net/N6mCw/)

The idea is to use the outer wrapper to crop the image. If you need to support IE<9 then instead of a background image you'll have to add an <img> tag within the inner div and remove the background-image CSS:

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

Although… the best way to do this would be to actually crop the image to the correct aspect ratio beforehand!

这篇关于剪切响应的全宽图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！