视口尺寸变化时固定定位图片的CSS平滑过渡实现方案

核心思路 #

移动端地址栏显示/隐藏会触发视口尺寸变化，CSS无法直接监听该浏览器行为，但可以通过JavaScript捕获视口高度变化，配合CSS过渡属性，让图片的位置或尺寸平滑适配新视口，避免突兀跳动。

实现方案 #

1. 给图片添加过渡效果 #

先通过CSS给图片设置过渡属性，让后续的样式变化产生平滑动画：

img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  /* 添加过渡动画，调整时长可控制平滑度 */
  transition: height 0.3s ease;
}

2. 监听视口变化并动态调整图片 #

通过JavaScript监听resize事件，捕获视口高度变化后，同步更新图片的高度，配合过渡实现平滑适配：

// 记录初始视口高度
let lastViewportHeight = window.innerHeight;

function adjustFixedImage() {
  const currentHeight = window.innerHeight;
  // 忽略微小的高度波动，避免不必要的调整
  if (Math.abs(currentHeight - lastViewportHeight) < 10) return;

  const img = document.querySelector('img');
  // 同步更新图片高度到当前视口高度
  img.style.height = `${currentHeight}px`;

  lastViewportHeight = currentHeight;
}

// 给resize事件加防抖，避免频繁触发导致卡顿
let resizeTimeout;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(adjustFixedImage, 50);
});

// 页面加载完成后初始化一次
window.addEventListener('load', adjustFixedImage);

3. 保持原有HTML结构不变 #

<div style="height: 40px; background: white;">Menu</div>
<div style="height: 100vh; overflow: hidden;">
  <img src="https://picsum.photos/200/300">
</div>
<div id="content" style="background: white">
  ...
</div>

补充说明 #

• 防抖延迟设为50ms是平衡响应速度与性能的折中值，可根据实际体验调整
• 优先调整图片height而非transform，结合object-fit: cover能保证图片始终适配视口，视觉效果更自然

内容的提问来源于stack exchange，提问作者Aurélien Pierre