如何根据用户屏幕宽高比加载适配的全屏图片？

方法1：CSS媒体查询+背景图（兼容性最优） #

这种方案完全依赖CSS，无需依赖新HTML特性，适合对旧浏览器兼容要求高的场景：

1. 提前准备对应不同宽高比的图片，例如：

   • bg-16-9.jpg（16:9比例）
   • bg-16-10.jpg（对应1680x1050的16:10比例）
   • bg-4-3.jpg（4:3比例）

2. 给全屏容器设置基础样式，确保占满屏幕：

.fullscreen-bg {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* 默认加载16:9的图 */
    background-image: url('bg-16-9.jpg');
}

3. 用aspect-ratio媒体查询切换不同宽高比的背景图：

/* 匹配16:10屏幕（设置小范围误差，避免精确匹配的局限性） */
@media (min-aspect-ratio: 15.9/10) and (max-aspect-ratio: 16.1/10) {
    .fullscreen-bg {
        background-image: url('bg-16-10.jpg');
    }
}

/* 匹配4:3屏幕 */
@media (aspect-ratio: 4/3) {
    .fullscreen-bg {
        background-image: url('bg-4-3.jpg');
    }
}

/* 匹配比16:9更宽的宽屏 */
@media (min-aspect-ratio: 16.1/9) {
    .fullscreen-bg {
        background-image: url('bg-wider.jpg');
    }
}

如果要兼容不支持aspect-ratio的老旧浏览器，可以用min-width/max-width结合min-height/max-height模拟比例判断，比如@media (min-width: 1680px) and (max-height: 1050px)，但精准度不如直接用aspect-ratio。

方法2：标签（语义化好，需权衡兼容性） #

虽然Firefox 2022年底才支持该标签，但当前主流浏览器版本已全面覆盖，若你的用户群体不使用特别老旧的浏览器，这个方案很合适：

<picture>
    <!-- 16:10屏幕加载对应图 -->
    <source media="(min-aspect-ratio: 15.9/10) and (max-aspect-ratio: 16.1/10)" srcset="bg-16-10.jpg">
    <!-- 4:3屏幕加载对应图 -->
    <source media="(aspect-ratio: 4/3)" srcset="bg-4-3.jpg">
    <!-- 宽于16:9的屏幕加载宽屏图 -->
    <source media="(min-aspect-ratio: 16.1/9)" srcset="bg-wider.jpg">
    <!-- 降级方案：默认加载16:9的图，兼容不支持picture的浏览器 -->
    <img src="bg-16-9.jpg" alt="全屏背景图" style="width:100vw; height:100vh; object-fit:cover;">
</picture>

这里用media属性直接匹配屏幕宽高比，object-fit:cover确保图片占满容器且不变形，和背景图的cover效果一致。

方法3：JavaScript动态加载（灵活度最高） #

如果需要更复杂的比例判断，或者结合其他业务逻辑（比如设备类型），可以用JS计算屏幕宽高比后切换图片：

1. 基础HTML结构：

<img id="fullscreen-img" src="bg-16-9.jpg" alt="全屏背景图" style="width:100vw; height:100vh; object-fit:cover;">

2. 编写JS逻辑：

function loadBgByAspectRatio() {
    const img = document.getElementById('fullscreen-img');
    const aspectRatio = window.innerWidth / window.innerHeight;
    
    // 定义各比例的数值
    const ratio16_9 = 16/9;
    const ratio16_10 = 16/10;
    // 设置误差容忍度，避免精确匹配的问题
    const tolerance = 0.02;

    if (Math.abs(aspectRatio - ratio16_10) <= tolerance) {
        img.src = 'bg-16-10.jpg';
    } else if (Math.abs(aspectRatio - ratio16_9) <= tolerance) {
        img.src = 'bg-16-9.jpg';
    } else if (aspectRatio > ratio16_9 + tolerance) {
        // 比16:9更宽的屏幕
        img.src = 'bg-wider.jpg';
    } else if (aspectRatio < ratio16_10 - tolerance) {
        // 比16:10更窄的屏幕，比如4:3
        img.src = 'bg-4-3.jpg';
    }
}

// 页面加载时执行
window.addEventListener('load', loadBgByAspectRatio);
// 窗口大小改变时重新计算切换
window.addEventListener('resize', loadBgByAspectRatio);

这个方法能处理更精细的比例区间，还能监听窗口 resize 事件，确保用户调整窗口大小时自动切换对应图片。

内容的提问来源于stack exchange，提问作者Alex