CSS background-size: cover (最推荐)

这是目前最流行、最简单且效果最好的方法，它利用 CSS3 的 background-size 属性，让背景图片自动覆盖整个容器，同时会保持图片的宽高比,避免变形。

jquery自适应网页窗口背景全屏
（图片来源网络，侵删）

优点：

  • 性能最佳： 不依赖 JavaScript，由浏览器原生渲染,效率高。
  • 代码简洁： 只需要几行 CSS 代码。
  • 响应式好： 窗口大小改变时,浏览器会自动重新计算和渲染。

实现步骤：

HTML 结构

只需要一个包裹内容的容器，并给它一个 ID 或 Class。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">jQuery 全屏背景</title>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入你的 CSS 文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="background-container">
        <!-- 你的页面内容，比如标题、文字等 -->
        <h1>欢迎来到我的网站</h1>
        <p>这是一个使用 CSS background-size: cover 实现的全屏背景示例。</p>
    </div>
    <!-- 引入你的 JS 文件 -->
    <script src="script.js"></script>
</body>
</html>

CSS 样式 (style.css)

关键在于设置 html 和 body 的高度为 100%,并设置背景图片。

jquery自适应网页窗口背景全屏
（图片来源网络，侵删）
/* 重置默认边距和填充 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 确保 html 和 body 元素占满整个视口高度 */
html, body {
    height: 100%;
    overflow: hidden; /* 防止出现滚动条 */
}
/* 这是背景容器的核心样式 */
#background-container {
    /* 1. 设置背景图片 */
    background-image: url('https://picsum.photos/seed/background/1920/1080.jpg'); /* 替换成你的图片路径 */
    /* 2. 让背景图片固定在视口中，不随页面滚动 */
    background-attachment: fixed; 
    /* 3. 关键：让背景图片覆盖整个容器 */
    background-size: cover; 
    /* 4. 将背景图片居中显示 */
    background-position: center center;
    /* 设置一个半透明的黑色遮罩，让文字更清晰 */
    background-color: rgba(0, 0, 0, 0.5);
    /* 使用 Flexbox 垂直水平居中内容 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    font-family: Arial, sans-serif;
}

jQuery 代码 (script.js)

在这个方案中，jQuery 代码实际上是可选的，因为 CSS 已经处理了所有响应式的工作。

如果你想在某些特定情况下（比如图片加载失败时）进行干预，或者需要获取背景图片的尺寸信息，jQuery 就派上用场了。

$(document).ready(function() {
    // 示例：当窗口大小改变时，执行一些操作（虽然 cover 已经自动处理了）
    $(window).resize(function() {
        // 你可以在这里添加一些逻辑，比如重新加载图片等
        // console.log("窗口大小已改变");
    });
    // 示例：如果图片加载失败，可以显示一个备用图片或颜色
    $('#background-container').on('error', 'img', function() {
        // 注意：background-image 的错误无法直接通过 jQuery on('error') 捕获
        // 这里只是一个概念演示，实际处理 CSS 背景图片错误比较复杂
        // $(this).css('background-image', 'url('your-fallback-image.jpg')');
    });
});

对于“背景全屏自适应”这个需求，纯 CSS 的 background-size: cover 是最佳选择，你甚至可以不写 jQuery 代码。

使用 <img> 标签 + jQuery 控制

这种方法适用于更复杂的场景，比如你需要对图片本身进行更多的 DOM 操作,或者需要动态更换图片。

jquery自适应网页窗口背景全屏
（图片来源网络，侵删）

实现步骤：

HTML 结构

在容器内放置一个 <img> 

<div id="img-background-container">
    <!-- 注意：img 标签需要放在一个容器内，并且容器要设置 position: relative -->
    <img src="https://picsum.photos/seed/background/1920/1080.jpg" alt="全屏背景" id="bg-img">
    <h1>欢迎来到我的网站</h1>
    <p>这是一个使用 jQuery 控制图片的全屏背景示例。</p>
</div>

CSS 样式 (style.css)

设置容器和图片的样式,让图片充满容器。

html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
#img-background-container {
    position: relative; /* 关键：为里面的绝对定位元素提供参考 */
    width: 100%;
    height: 100vh; /* 100% 视口高度 */
}
#bg-img {
    /* 1. 绝对定位，充满整个容器 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 2. 让图片覆盖容器，并保持比例 */
    object-fit: cover; /* CSS3 属性，效果等同于 background-size: cover */
    /* 3. 让图片居中 */
    object-position: center center;
}
需要放在一个独立的层，并设置 z-index */
#img-background-container h1, #img-background-container p {
    position: relative; /* 相对于 #img-background-container 定位 */
    z-index: 10; /* 显示在图片之上 */
    color: white;
    text-align: center;
    font-family: Arial, sans-serif;
}

jQuery 代码 (script.js)

这里，jQuery 主要用于监听窗口大小变化，并手动调整图片的尺寸（虽然 object-fit 已经能自动处理，但为了演示 jQuery 的用法，我们这样做）。

$(document).ready(function() {
    // 定义一个函数来调整图片大小
    function resizeImage() {
        const $img = $('#bg-img');
        const containerWidth = $('#img-background-container').width();
        const containerHeight = $('#img-background-container').height();
        // jQuery 的 .width() 和 .height() 方法可以方便地获取元素尺寸
        console.log(`容器尺寸: ${containerWidth} x ${containerHeight}`);
        // 注意：在现代浏览器中，由于 object-fit: cover 的存在，
        // 手动设置 width/height 是多余的，但这是一个很好的 jQuery API 演示。
        // $img.css({
        //     'width': containerWidth + 'px',
        //     'height': containerHeight + 'px'
        // });
    }
    // 页面首次加载时执行一次
    resizeImage();
    // 当窗口大小改变时，重新调整图片大小
    $(window).resize(function() {
        // 使用防抖（debounce）技术，避免在窗口拖动过程中频繁触发
        // 这能显著提高性能
        clearTimeout(window.resizeTimer);
        window.resizeTimer = setTimeout(resizeImage, 250);
    });
});

注意： object-fit: cover 的 CSS 属性已经完美解决了这个问题，所以在这个方案中，jQuery 的 resize 事件监听器里的逻辑其实是不必要的，但这个例子很好地展示了如何使用 jQuery 来获取和设置 DOM 元素的尺寸。

jQuery 插件 backstretch

如果你不想自己写代码，可以使用现成的 jQuery 插件，backstretch,它非常轻量且专门为此功能设计。

优点：

  • 使用简单： 一行代码即可实现。
  • 功能丰富： 支持图片数组轮播、淡入淡出效果等。

实现步骤：

引入文件

除了 jQuery，你还需要引入 backstretch 的 CSS 和 JS 文件。

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 Backstretch 插件 -->
<script src="jquery.backstretch.min.js"></script>

jQuery 代码

在 $(document).ready() 中直接调用插件方法。

$(document).ready(function() {
    // 最简单的用法
    $.backstretch("https://picsum.photos/seed/background/1920/1080.jpg");
    // 也可以传入选项
    // $.backstretch("path/to/image.jpg", { centeredX: true });
});

插件会自动处理图片的拉伸和窗口大小变化。

总结与对比

方案 优点 缺点 推荐场景
CSS background-size: cover 性能最好、代码最简单、响应式完美 对图片本身的 DOM 操作较少 绝大多数情况下的首选，特别是纯展示型背景。
<img> + object-fit 灵活性高，图片是真正的 DOM 元素，方便操作 比 CSS 背景稍复杂，需要处理层级关系 需要对图片进行事件监听（如点击）、滤镜或动画时。
jQuery backstretch 插件 使用极其简单，功能扩展性强 增加了外部依赖，文件体积略大 快速开发，或需要图片轮播等高级功能时。

最终建议： 对于你的问题“jquery自适应网页窗口背景全屏”，最核心的解决方案是 CSS，你可以直接使用方案一，它既高效又简洁，如果因为某些原因必须使用 jQuery 操作 <img> 标签，那么方案二是你的选择,方案三则是为了提高开发效率的捷径。