图片边的宽度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; 
} 

此滑块将显示完全覆盖的可用面积。 :-)