Image side of width 100% of div and fix height for responsive website

Question

I am working on an ASP.NET MVC website. The landing page is slit into 4 divs:

• Header div (where navigation bar is)
• Image slider div (where I need to slide images)
• Body div (contents of main body)
• Footer div

Now the width and height of the image slider div is calculated on load or resize time and adjusted to cover the whole screen.

jQuery to adjust block height and width to 100% of the viewport:

 $(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");

    });

Image slider 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>

My issue is the image height. I can manage the width as I am using Nivo Slider plugin, but the height goes over or small depending on screen size. I am working on image with 1400 X 900 resolution.

I want like this: http://www.coffeecreamthemes.com/themes/jobseek/demo2/

I have bought Slider Revolution but this is for Wordpress. Secondly I cannot find related jQuery and CSS files in the download bundle .

I need the solution, I am not sure of how to achieve this behavior.

Answer 1

This CSS should do it for you ;)

#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;
}

This slider would show fully covering the available area. :-)