Geek asks and answers

Full image cropping

I need to pin an image that spans the entire width. The following things did not work for me

  • clip: this requires an absolute position, so the elements of the block do not flow below
  • background-position: it does not loop when the enlarged part is enlarged when magnified, and vice versa.
  • wrapper: the height of the wrapper depends on the width of the browser, so its value should be dynamic.

I used js with setinterval 1 millisecond. so the wrapper height is constantly updated. works fine 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>
+3
source share
1 answer

Try the following:

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, <img> div CSS:

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

... - !

+1

More articles:


All Articles