Question

我正在开发一个ASP.NET MVC网站。着陆页被分为4个div：

标题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。其次，我无法在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;
}

此滑块将显示完全覆盖可用区域。： - ）

div的宽度为100％的图像边和修复高度为响应网站

1 个答案: