【问题标题】:layerslider WP 100% width and height图层滑块 WP 100% 宽度和高度
【发布时间】:2020-05-21 17:01:20
【问题描述】:

有人可以指导我如何获得全屏图像,使其像提供的链接一样保持在水平和垂直中心。

http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

我只在背景位之后,我需要一个 div 中的图像,就像在示例中一样在 css 中,因为我将它用于 wordpress 中的滑块。

【问题讨论】:

标签: html wordpress fullscreen


【解决方案1】:

为了让您的 LayerSlider 以 100% 的高度和宽度显示,请将“滑块设置”中的“滑块高度”属性留空,然后使用如下脚本设置高度:

<script type="text/javascript"> 
    function resize()
    {
        var heights = window.innerHeight;
        document.getElementById("layerslider_1").style.height = heights + "px";
    }
    resize();
    window.onresize = function() {
        resize();
    };
</script>

将脚本插入到您的 footer.php 文件中,位于结束 body 标记之前。如果您的滑块 ID 不是 1 号,则将“layerslider_1”更改为正确的 ID。

【讨论】:

    【解决方案2】:

    你可以给 div 元素添加样式

    <div style="background: url(images/xyz.jpg) no-repeat center center fixed;">...</div> 
    

    我刚刚从您的示例页面中取出 css 并复制/粘贴!

    【讨论】:

    • 谢谢你,我确信这通常会起作用,但我尝试了你的代码并用短代码替换了 url,因为它要与 layerslider 一起使用,我无法让它工作,这里是我使用的代码&lt;div style="background: url(&lt;?php echo do_shortcode('[layerslider id="1"]'); ?&gt;) no-repeat center center fixed;"&gt;...&lt;/div&gt;
    猜你喜欢
    • 2014-02-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-08-09
    • 2015-02-04
    • 2015-03-25
    相关资源
    最近更新 更多