javascript - css背景在div高度重置时重复

Question

我实现了以下 html/javascript。我的目标是调整图像大小，同时保持其纵横比，以获取浏览器窗口的高度/宽度。但是，在实现此代码时，每个调整大小事件都会将 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 就完成了。