图片侧宽度为 100% 的 div 并修复响应式网站的高度

Posted 2023-05-07

【中文标题】图片侧宽度为 100% 的 div 并修复响应式网站的高度

【英文标题】：Image side of width 100% of div and fix height for responsive website

【发布时间】：2016-10-12 12:15:37

【问题描述】：

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

标题 div（导航栏所在的位置） 图像滑块 div（我需要在其中滑动图像） Body 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"  />
                <img src="~/Graphics/Images/slider2.jpg"  />
                <img src="~/Graphics/Images/slider3.jpg"  />
            </div>
        </div>           
    </div>

我的问题是图像高度。我可以在使用 Nivo Slider 插件时管理宽度，但高度会根据屏幕大小而变大或变小。我正在处理分辨率为 1400 X 900 的图像。

我想要这样：http://www.coffeecreamthemes.com/themes/jobseek/demo2/

我已经购买了 Slider Revolution，但这是用于 Wordpress。其次，我在download bundle 中找不到相关的 jQuery 和 CSS 文件。

我需要解决方案，我不确定如何实现此行为。

【问题讨论】：

如何调整滑块宽度？你也可以为此添加 jQuery 吗？

我有 BannerImageSlider Div，其宽度和高度根据 jquery 代码调整，我在上面的问题中提供了

【参考方案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;

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

【讨论】：

JS 代码应该在调整高度后放置。

不，它不起作用，它只会增加图像的大小

您可以分享指向您网站的链接吗？