我实现了以下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();
    });
});

最佳答案

不要将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就可以完成工作。

07-24 09:38
查看更多