반응이있는 전체 너비 이미지 자르기

Question

나는 전체 너비의 이미지를 클립해야합니다. 저

1. 클립의 다음 사항을 didnt 작업 : 블록 요소 아래
2. 배경 위치 스택 해달라고 그래서 이것은 절대 위치를 필요 제대로 클립 그다지 잘린 부분의 경우 크게 증가하고 반대로 확대 된 경우.
3. 래퍼 : 래퍼 높이는 브라우저 너비에 따라 다르므로 해당 값은 동적이어야합니다.

setinterval 1 밀리 초로 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/)

아이디어는 외부 래퍼를 사용하여 이미지를 자르는 것입니다. 에 ... 가장 좋은 방법이지만

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

: 배경 이미지 대신 다음 9 IE <를 지원해야하는 경우에는 내부 사업부 내에서 <IMG> 태그를 추가하고 배경 이미지 CSS를 제거해야합니다 이 작업은 미리 정확한 가로 세로 비율로 이미지를 잘라내는 것입니다!