窗口缩放时如何固定网页顶部与底部面板图片的尺寸及位置？

我是CSS/HTML新手，正在制作网页。全屏状态下元素/图片显示正常，但调整窗口大小时，顶部和底部面板图片会发生移位和缩放变形。我希望保持它们的尺寸和位置固定。

问题场景 #

• 全屏窗口：显示正常（预期效果）
• 窗口缩放后：顶部和底部面板移位
• 窗口缩放后：顶部和底部面板显示异常

现有代码 #

CSS代码

body {
  background-color: #70ADD5;
}

iframe {
  margin: auto;
  background: url(./images/Background\ Panel.png);
  background-size: cover;
  position: absolute;
  border: none;
  top: 3%;
  left: 9%;
  transform: scale(1, 1);
  width: 1600px;
  height: 900px;
  z-index: -1;
}

#bottom {
  position: fixed;
  transform: scale(1, 1);
  object-fit: contain;
  width: 81.2%;
  top: 690px;
  left: 10%;
}

#top {
  position: fixed;
  transform: scale(1, 1);
  object-fit: contain;
  width: 81.2%;
  top: 5px;
  left: 10%;
}

HTML代码

<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />

<iframe></iframe>
<img src="./assets/images/Bottom Holder.png" id="bottom" alt="bottom panel">
<img src="./assets/images/Top Holder.png" id="top" alt="top panel">

解决方案 #

核心问题

你当前代码的问题在于：

1. 顶部/底部面板用百分比宽度+固定像素定位，窗口缩放时宽度随窗口变化，但定位的像素值不会同步调整，直接导致错位；
2. position: fixed是相对于浏览器视口定位，而非页面内容，窗口缩放时必然偏离预期位置；
3. object-fit: contain会让图片自适应容器宽度，导致缩放变形。

修复后的代码

CSS代码

body {
  background-color: #70ADD5;
  overflow: hidden; /* 隐藏窗口过小产生的滚动条 */
}

/* 固定尺寸的主容器，模拟设计稿尺寸，作为所有元素的定位基准 */
.main-container {
  position: relative;
  width: 1600px;
  height: 900px;
  margin: 0 auto; /* 保持容器居中 */
  /* 自动缩放容器以适配窗口，同时保持宽高比 */
  transform: scale(calc(min(100vw / 1600, 100vh / 900)));
  transform-origin: top center; /* 缩放以顶部居中为原点，避免偏移 */
}

iframe {
  background: url(./images/Background\ Panel.png);
  background-size: cover;
  position: absolute;
  border: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#bottom {
  position: absolute;
  width: 81.2%; /* 保持原比例宽度 */
  bottom: 0; /* 基于容器底部定位，替代固定像素top值 */
  left: 9.4%; /* 和背景面板的left值对齐，确保位置准确 */
  object-fit: none; /* 强制图片保持原始尺寸，禁止缩放 */
  object-position: center; /* 图片在容器内居中显示 */
}

#top {
  position: absolute;
  width: 81.2%;
  top: 0; /* 基于容器顶部定位 */
  left: 9.4%;
  object-fit: none;
  object-position: center;
}

HTML代码

<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />

<!-- 新增主容器，所有元素嵌套其中 -->
<div class="main-container">
  <iframe></iframe>
  <img src="./assets/images/Bottom Holder.png" id="bottom" alt="bottom panel">
  <img src="./assets/images/Top Holder.png" id="top" alt="top panel">
</div>

改动说明

• 新增main-container作为所有元素的定位基准，固定宽高匹配设计稿，通过transform: scale()自适应窗口大小，同时保持比例；
• 顶部/底部面板改用position: absolute，基于主容器定位，彻底解决fixed定位带来的视口错位问题；
• 用top:0和bottom:0替代固定像素值，让面板始终贴合容器的顶部/底部；
• object-fit: none强制图片保持原始尺寸，避免缩放变形，确保显示效果和全屏状态一致。

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