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。

Answer 2

Niels的做法很好。您正在将div的高度设置为window.height。但窗口高度= window.Innerheight +滚动条/工具栏。因此，每次滚动条的大小都会增加。

function resizeHeaderPic(){
    var height = $(window).innerHeight();
    $('.header-pc').height(height);
}

div高度重置时css背景重复

2 个答案: