액체에 이미지 맞추기 부모님

대형 화면 모니터에서 요청할 수있는 동안 액체 레이아웃 (상위)에 이미지 슬라이더를 표시하려고하는데 이미지의 높이와 높이를 제한하고 싶지 않습니다. (27 ")을 11"또는 그 이하의 작은 것으로 변환하십시오. 이 문제를 해결하는 데 도움이되는 플러그인이 있다면 알려 주시기 바랍니다. 가 지금 내가 슬라이더 (플러그인 - NIVO) 사용하고 고정 된 레이아웃이 나는 액체 로 변경할 수 없습니다 나는 여기에 내가 가지고있는 코드입니다 : HTML액체에 이미지 맞추기 부모님

<!DOCTYPE HTML> 
<html> 
<head> 
<title>GALLERY</title> 
</head> 
<body> 
<div id="row_1"> 
<div class="container"></div> 
</div> 
<div id="row_2"> 
<div class="container"> 
<div id="slideshow"> 
<div id="slider"> 
<img src="img/1.jpg" title="" style="" /></div>  
<img src="img/2.jpg" title="" style="" /></div> 
<img src="img/3.jpg" title="" style="" /></div> 
<img src="img/4.jpg" title="" style="" /></div>  
</div> 
</div> 
</div> 
</div> 
<div id="row_3"> 
<div class="container"></div> 
</div> 
</body> 
</html>

CSS

* { 
    margin: 0; 
    padding: 0; 
    } 
html{ 
    height:100%; 
    width: 100%; 
    } 
body { 
    background-color: #272321; 
    height:100%; 
    width: 100%; 
    } 
#row_1 { 
    position:relative; 
    height:15%; 
    width: 100%; 
} 
#row_2{ 
    position:relative; 
    height:77%; 
    width: 100%; 
    } 
    #row_3{ 
    position:relative; 
    height:8%; 
    width: 100%; 
    background-color: #151110; 
    } 
    .container{ 
    position:relative; 
    margin: 0 auto; 
    height:100%; 
    width: 80%; 
    }

다른 화면 크기에 대해 여러 레이아웃을 사용하는 것이 좋습니다. Jquery로이 문제를 해결할 방법이 있습니까?

출처

2012-07-15 Behseini

미리 준비된 플러그인에 대해서는 알지 못하지만이를 처리하기위한 코드는별로 없습니다.

이벤트 처리기를 윈도우 크기 조정에 첨부하고 컨테이너 div의 크기를 확인한 다음 자신의 자바 스크립트를 사용하여 새 컨테이너 크기에 따라 슬라이드 쇼의 새 이미지 크기를 선택할 수 있습니다. 크기 조정 동안 수백 번 실행 코드를 방지하기 위해 약간의 지연을 사용

,이 같을 수 : http://jsfiddle.net/jfriend00/Tucf2/

출처

2012-07-15 19:39:04 jfriend00

감사합니다 당신이 들어 가지로 괜찮 friend00 : 여기

(function() { var pauseTimer; $(window).resize(function() { // clear any previous timer running if (pauseTimer) { clearTimeout(pauseTimer); } // set new timer pauseTimer = setTimeout(function() { // user finished or paused resizing, // so now we can recalculate slideshow size pauseTimer = null; // examine the size of your container div // select a new size image for your slideshow and load those images here }, 500); }) })();

는 데모입니다 내가이 샘플을 어디에서 찾을 수 있는지 알고 있니? – Behseini

@ user1106951 - "샘플"이란 무엇입니까? 크기를 감지하기위한 샘플 코드를 제공했습니다. 슬라이드 쇼를 새로운 크기로 재설정하는 것은 귀하에게 달려 있습니다. – jfriend00

내 답변에 데모 링크가 추가되었습니다. – jfriend00

액체에 이미지 맞추기 부모님

답변

관련 문제