Question

我正在使用带有背景图片的全屏元素，但它并没有按照我想要的方式工作。我希望全屏背景图像调整大小并居中。我做错了什么？

编辑：我想要一个带有背景图像的介绍div元素，其大小与浏览器视口相同。经过大量的搜索，我发现我必须使用视口单元或javascript才能工作。以下是我想要这样做的链接：http://www.genymobile.com/如果我的问题不清楚，请抱歉！

jQuery代码

jQuery(document).ready(function ($) {

    fullscreen();

    $(window).resize(function () {
        fullscreen();
    });

    function fullscreen() {
        var windowWidth = $(window).width();
        var windowHeight = $(window).height();
        $(".fullscreen-container").css({
            "width": windowWidth,
            "height": windowHeight
        });
    }
});

CSS

.fullscreen-container {
    width: 100%;
    height: 100%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background: url(images/hav.jpg);
}

HTML

<div class="fullscreen-container">

</div>

Answer 1

无需使用jQuery。您需要将html和body的高度设置为full。然后，您可以将元素.fullscreen-container高度设置为100％。

<强> DEMO

使用 CSS

body, html {
    height: 100%;
}

Answer 2

我对用例不太确定。

但是你的问题正在发生是因为CSS使用错误。看到以下小提琴。 https://jsfiddle.net/3rdhf090/

.fullscreen-container {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(http://imagesmtv-a.akamaihd.net/uri/mgid:uma:image:mtv.com:10661039?quality=0.8&format=jpg&width=480&height=270);
}

Answer 3

你使用背景速记＆＃34;背景：url（images / hav.jpg）＆＃34;最后，在你的案例属性中覆盖所有上面的背景属性是＆＃34; background-position background-repeat background-size＆＃34;只需在最后使用背景图片或使用速记背景属性背景：url（http://placehold.it/350x150）no-repeat center / contain;

Answer 4

页面的主体高度取决于内容。您的容器大小继承了正文的100％。但如果体内没有内容，容器的高度将为零。如果您想要一个全屏背景图片，那么您就不需要JQuery来调整背景图像的大小。您只需将position: absolute;添加到CSS文件中即可。

.fullscreen-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url("https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg");
}

小提琴：http://jsfiddle.net/ABr/eK8X5/7011/

jQuery不会通过视口大小调整来改变背景图像的大小

4 个答案: