圖片邊的寬度100％的div和修復高度的響應式網站

Question

我正在ASP.NET MVC網站上工作。着陸頁裁切成4個格：

• 部首的div（其中導航欄是）
• 圖像滑塊的div（我要在其上滑動的圖像）
• 身體的div
（主體的內容）
• 頁腳div

現在，圖像滑塊div的寬度和高度在加載或調整大小時計算並調整爲覆蓋整個屏幕。

jQuery來塊的高度和寬度調整到視區的100％：

$(window).bind('load resize', function() { 

     $("#nivo-slider").nivoSlider(); 

     var viewport_height = $(window).height(); 

     var viewport_width = $(window).width(); 

     var bodyTopPadding = $("body").css('padding-top').replace(/[^-\d\.]/g, ''); 

     $("#BannerImageSlider").css("height", (viewport_height - bodyTopPadding)+ "px"); 

    }); 

圖像滑塊DIV：

<div id="BannerImageSlider"> 
     <div class="slider-wrapper theme-default"> 
      <div id="nivo-slider" class="nivoSlider" style="width: 100%"> 
       <img src="~/Graphics/Images/slider1.jpg" alt="" /> 
       <img src="~/Graphics/Images/slider2.jpg" alt="" /> 
       <img src="~/Graphics/Images/slider3.jpg" alt="" /> 
      </div> 
     </div>   
    </div> 

我的問題是圖像高度。我可以在使用Nivo Slider插件時管理寬度，但高度超過或小於屏幕尺寸。我正在處理1400 X 900分辨率的圖像。

我想是這樣的：http://www.coffeecreamthemes.com/themes/jobseek/demo2/

我已經買了滑塊革命，這是WordPress的。其次，我無法在download bundle中找到相關的jQuery和CSS文件。

我需要解決方案，我不確定如何實現此行爲。

Answer 1

這個CSS應該爲你做它;）

#BannerImageSlider { 
    position: relative; 
} 
#BannerImageSlider .slider-wrapper { 
    position: absolute; 
    top: -999px; 
    bottom: -999px; 
    left: -999px; 
    right: -999px; 
    max-width: 155.56vh; 
    max-height: 100vh; 
    margin: auto; 
} 

此滑塊將顯示完全覆蓋的可用面積。 :-)