object-fit: cover在position: fixed元素上失效，求视差效果解决方案

为啥原来的代码不行？ #

当图片设置position: fixed后，它会脱离文档流，相对于浏览器视口定位，而不是父容器.wrapper。这时候你设置的width:100%和height:100%是视口的尺寸，不是.wrapper的大小，所以object-fit: cover根本没法按预期适配容器区域。

两种可行的解决办法 #

办法一：用伪元素做背景图（首推） #

把图片作为.wrapper的伪元素背景，用background-attachment: fixed实现固定视差效果，再靠background-size: cover让图片完美适配容器：

.wrapper {
  border: 1px solid black;
  height: 500px;
  width: 600px;
  position: relative;
  margin: 20px auto;
  overflow: hidden; /* 替代clip-path，同样能限制显示范围 */
}

.wrapper::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('http://placekitten.com/1000/1000');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: -1; /* 让背景在容器下方 */
}

<div class="wrapper"></div>

办法二：用JS动态调整图片尺寸（适合必须用<img>标签的场景） #

如果一定要用<img>标签，可以通过JS获取.wrapper的位置和尺寸，动态设置固定定位图片的宽高和位置，配合object-fit: cover生效：

.wrapper {
  border: 1px solid black;
  height: 500px;
  width: 600px;
  position: relative;
  margin: 20px auto;
  clip-path: inset(0 0 0 0);
  overflow: hidden;
}

.image {
  position: fixed;
  object-fit: cover;
  opacity: 0; /* 先隐藏，等计算完再显示 */
  transition: opacity 0.2s;
}

<div class="wrapper">
  <img class="image" src="http://placekitten.com/1000/1000" />
</div>
<script>
function adjustFixedImg() {
  const wrapper = document.querySelector('.wrapper');
  const img = document.querySelector('.image');
  const wrapperRect = wrapper.getBoundingClientRect();
  
  // 把图片尺寸设成容器的大小
  img.width = wrapperRect.width;
  img.height = wrapperRect.height;
  // 让图片位置和容器对齐
  img.style.left = `${wrapperRect.left}px`;
  img.style.top = `${wrapperRect.top}px`;
  img.style.opacity = 1;
}

// 页面加载和窗口 resize 时都要调整
window.addEventListener('load', adjustFixedImg);
window.addEventListener('resize', adjustFixedImg);
</script>

补充说明 #

• 办法一不需要JS，性能更好，能完美实现固定背景+适配容器的需求，是优先选择的方案。
• 办法二适合必须使用<img>标签的场景，但要注意监听窗口大小变化，确保图片始终适配容器。

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