关于CSS排版背景图全屏展示的问题?

Question

需求是 背景撑满显示器一屏，以中心点自适应缩放，当背景缩小到1920x1080的大小后不再缩小。
用以下CSS实现，

.bg-full-screen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 1920px;
    min-height: 1080px;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

问题是，在1920*1080显示器下1080的在全屏模式下的高度，因为显示窗口还有浏览器工具栏、操作系统任务栏等其他部分屏幕空间，所以在高度是945px，
// 常见分辨率

const testResolutions = [
    [1920, 945], // 目标分辨率
    [2560, 1440], // 2K屏
    [3840, 2160], // 4K屏
    [1366, 768] // 常见笔记本
];

现在设计稿边缘还有核心元素（操作上一页下一页等）

这种情况下如何排版，感谢指导。

示意图

尝试了多种办法，在等比背景下，显示出左侧的选显卡按钮后，下一页的的操作按钮会在屏幕外。
但在F11全屏模式下显示正常。
个人觉得这种情况下只能选择根据显示窗口大小，如1920*945，不等比压缩图片了。

Answer 1

<div class="container">
  <img class="bg-image" src="your-background.jpg" alt="">
  <div class="content">
    <!-- 左侧导航和下方按钮放这里 -->
  </div>
</div>

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-width: 1920px;
  min-height: 1080px;
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}