適合圖像（S）在液體家長

我想在液體佈局（父）呈現的圖像滑塊，我不喜歡限制高度和圖像的使用，而他們可以通過大屏幕顯示器請求（27「）小到11」或更小。如果有插件可以幫助我解決這個問題，請讓我知道嗎？現在我使用滑塊（插件 - NIVO），它有一個固定的佈局，我不能將其更改爲液體這裏是代碼，我有： HTML適合圖像（S）在液體家長

<!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容器的大小，並用自己的JavaScript來選擇新的圖像尺寸基礎上，新的容器大小的幻燈片。

使用稍有延遲，以防止調整大小期間運行數百次的代碼，它可能看起來像這樣：

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

這裏有一個演示：http://jsfiddle.net/jfriend00/Tucf2/

來源

2012-07-15 19:39:04 jfriend00

感謝friend00是否確定你讓我知道在哪裏可以找到這樣的樣本？ – Behseini 2012-07-15 19:49:53

@ user1106951 - 你是什麼意思「樣本」？我提供了用於檢測調整大小的示例代碼。將幻燈片重置爲新尺寸取決於您。 – jfriend00 2012-07-15 19:59:47

添加了一個演示鏈接到我的答案。 – jfriend00 2012-07-15 20:20:05

適合圖像（S）在液體家長

回答

相關問題