图像宽度为div的100％，固定高度为自适应网站

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/

我已经购买了Slider Revolution，但这是给Wordpress的。 其次，我在下载包中找不到相关的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;
}

该滑块将显示完全覆盖可用区域。 :-)