高度没有调整LayerSlider 5的大小答案

【问题标题】：Height not resizing LayerSlider 5高度没有调整LayerSlider 5的大小
【发布时间】：2014-01-15 07:04:39
【问题描述】：

我在使用最新版本的 LayerSlider 时遇到问题。我已经使用了全角响应式演示中的所有内容并阅读了所有选项，但是当我调整浏览器大小时，高度不会更新。为了使这一点更清晰，图像本身会缩放，但容器的高度保持不变。在文档中它说你必须给容器一个高度。

我的代码如下：

HTML：

<div id="LayerSlider" class="Slider">
    <div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
        <img src="/Assets/Images/Layerslider/Banner1.jpg" class="ls-bg" alt="Slide background"/>
    </div>
    <div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
        <img src="/Assets/Images/Layerslider/Banner2.jpg" class="ls-bg" alt="Slide background"/>
    </div>
</div>

jQuery

$(document).ready(function () {
    $('#LayerSlider').layerSlider({
        responsive: false,
        layersContainer : 1178,
        responsiveUnder : 1500
    });
});

在文档中说你必须使用 responsive: false 如果你想使用 responsiveUnder 使其在指定宽度下响应。

链接到LayerSlider http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/

【问题讨论】：

尝试将skin:'fullwidth' 放入你的JS。
谢谢，但不幸的是没有运气。我认为这可能是我放置
您在使用skin:'fullwidth' 时是否在控制台中出现任何错误？另外，尝试将它放在结束 body 之前。
试图把它放在关闭的身体之前 - 没有运气。也没有控制台错误。如果我检查（萤火虫）当我调整浏览器窗口大小时，layerslider html/css 正在做什么，则容器的高度或图层的高度都不会调整大小。他们在演示中调整大小。感谢您的帮助！

标签： javascript jquery mobile plugins jquery-plugins

【解决方案1】：

您需要做的就是将容器 css 内联。

<div id="LayerSlider" class="Slider" style="width:100%; height:427px;">

【讨论】：

【解决方案2】：

在调整窗口大小时使用 jquery 更改#layerslider 高度。

    <script type="text/javascript">
        $(window).resize(function() {
            var newHeight;
            newHeight = $(window).width();
            newHeight = newHeight / 2.25
            newHeight = parseInt(newHeight);
            // alert(newHeight);
            $('#layerslider').css('height', newHeight);
        });
    </script>

【讨论】：

如果它是为了响应式的，你也可以像这样使用 css：height: 44.44vw !important; 而不是使用 javascript 来解决问题。（44.44 相当于 2.25 的百分比）

【解决方案3】：

我遇到了完全相同的问题。就我而言，这是由于 css 样式的重复，当我们将站点迁移到 liferay cms（添加了各种 html）时。我们重组了一些网站并将layerslider.css复制并粘贴到文档中（这样我们就可以在无需部署主题的情况下对其进行编辑）——但从未删除原始css文件。删除样式是固定高度计算的原因。显然，javascript 使用您为高度和宽度设置的 css 样式来计算图像、文本和父容器的大小。

希望这会有所帮助。

【讨论】：

【解决方案4】：

我使用 css 断点来解决此图层 Slider 的高度问题。使用图层滑块的 CSS 编辑器。

@media only screen and (min-width:800px) and (max-width:960px) {
.ls-wp-fullwidth-container {
    height: 65vh!important;
}
@media only screen and (min-width:768px) and (max-width:800px) {
    .ls-wp-fullwidth-container {
        height: 50vh!important;
    }
}
@media only screen and (min-width:600px) and (max-width:768px) {
    .ls-wp-fullwidth-container {
        height: 42vh!important;
    }
}
@media only screen and (min-width:480px)and (max-width:600px) {
    .ls-wp-fullwidth-container {
        height: 33vh!important;
    }
   }

-icodefy

【讨论】：