크기 재조정시 배경 표지 크기로 Img 태그가 작동하지 않음

제목으로 CSS 배경 크기 커버 결과를 얻으려면 태그 이미지가있는 두 개의 html 상자가 있는데 너비와 높이가 100 %이고 투명 이미지를 넣습니다. 상대적인 위치에, 조금 거칠지 만, 고정 된 크기의 상자가없는 목적을 달성했습니다.크기 재조정시 배경 표지 크기로 Img 태그가 작동하지 않음

.box { 
width: 100%; 
height: 100%; 
margin: 0 auto; 
border: 1px solid; 
position: relative; 
overflow: hidden 
} 
img { 
position: absolute; 
z-index: -1; 
} 
img.img { 
position: relative; 
z-index: 1; 
width: 100%; 
height: 100%; 
top: 0; 
left: 0 
} 

<div class="container" style="width: 100%"> 

<div class="row"> 

<div class="col-xs-6"> 
    <div class="box"> 
    <img class="image" src="http://placehold.it/1440x1440"> 
    <img class="img" src="1000.png"> 
    </div> 
</div> 

<div class="col-xs-6"> 
    <div class="box"> 
    <img class="image" src="http://placehold.it/2560x1440"> 
    <img class="img" src="1000.png"> 
    </div> 
</div> 

    </div> 
    </div>

그것은 완벽하게 작동,하지만 당신은 창 크기를 조정하면 페이지가 새로 고침이 될 때까지, 그것이 작동하지 않습니다 : (나는 JQuery와 및 부트 스트랩을 사용).

모든 것을 onresize 함수로 묶으려고했으나 제대로 작동하지 않았습니다.

몇 가지 아이디어가 있습니까? 너무 많은

감사

결과 : https://jsfiddle.net/yhshkxrq/17/

전체 : https://jsfiddle.net/yhshkxrq/17/embedded/result/#Result

출처

2017-05-23 Claudio

가 $(window).resize 기능을 사용 는 fiddle

출처

2017-05-23 21:27:01 gaganshera

에 코드를 이미했습니다, 당신에게 너무 많은 gaganshera 감사 업데이트 크기를 모두 줄 바꿈 시도했는데 크기가 조정될 때만 작동하고 크기를 줄이면 작동하지 않는 것처럼 보이며 크기를 낮추면 작동하지 않습니다. 파프지나. 나는 이유를 모른다! – Claudio

페이지의 크기가 정확하게 작게 작동하지 않습니다. – gaganshera

더 잘 설명해 드리겠습니다. 768 x 1024 크기의 타블렛 모드 초상화 (또는 시뮬레이터 크기 조정 창)에서 결과를 엽니 다. 괜찮습니다. 타블렛을 끄고 1024 x 768 크기로 이동하십시오. 괜찮습니다. 768 x 1024 (resize down)로 돌아 가면 작동하지 않습니다. 상자 안의 이미지가 커버되도록 크기가 조정되었습니다. – Claudio

크기 재조정시 배경 표지 크기로 Img 태그가 작동하지 않음

답변

관련 문제