圖像寬度為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;
}

該滑塊將顯示完全覆蓋可用區域。 :-)