div高度重置时css背景重复

Question

我有以下html/javascript实现.我的目标是在保持纵横比的同时调整图像大小,以获取浏览器窗口的高度/宽度.但是,在实现此代码时,每个resize事件都会增加div高度(旧高度+新高度,而不是将其设置为新高度.如何阻止div以这种方式增长？

<div class="header-pc" style="background-image: url('assets/sunset-flipped1.png');background-size: 100% auto;height:1000px"></div>

function resizeHeaderPic(){
    var height = $(window).height();
    $('.header-pc').height(height);f
}
$(document).ready(function(){
    //resizeHeaderPic();
    $(window).resize(function(){
        resizeHeaderPic();
    });
});

Answer 1

不要将Javascript用于简单的CSS任务.

body {
    background-image: url('assets/sunset-flipped1.png');
    background-size: cover;         /* Fit to cover entire element */
    background-position: center;    /* Where to scale from in the image */
}

而且你没有任何HTML或Javascript.