如何实现动画图片响应式，解决屏幕缩放时图片位置偏移问题？

问题根因 #

你当前用了position: fixed相对于视口做固定定位，且top、left属性用了固定像素值，屏幕尺寸变化后视口宽高改变，固定像素的定位值自然会让图片偏离你想要的位置。你写的上下平移动画本身用transform实现，不会影响元素的定位布局，不需要修改动画逻辑。

解决方案 #

根据你的使用场景选对应方案即可： #

方案1：图片需要相对于页面内某块区域固定位置（最常用）

不要用fixed定位，改成父容器相对定位，图片绝对定位，用相对单位做位置控制：

1. 给你要依附的父容器加定位属性：

.parent_container {
  position: relative;
  /* 父容器原有样式保留 */
}

2. 修改图片的CSS：

.image_it{
  width: 85px;
  position: absolute;
  /* 把固定像素改成相对于父容器的百分比/相对单位，数值根据你的实际需求调整即可 */
  top: 20%;
  left: 15%;
  animation: animate1 7s linear infinite;
}

/* 原有动画逻辑不变 */
@keyframes animate1 {
  0%,100% {
      transform: translateY(11px);
  }
  50% {
      transform: translateY(-11px);
  }
}

3. HTML结构调整，把图片放到对应的父容器内：

<html>
<body>
  <div class="parent_container">
    <!-- 父容器内其他原有内容 -->
    <img src="/images/it.jpg" alt="IT" class="image_it">
  </div>
</body>
</html>

方案2：图片确实需要相对于整个浏览器视口固定位置

把固定像素的top、left值改成视口相对单位即可：

.image_it{
  width: 85px;
  position: fixed;
  /* vw是视口宽度百分比，vh是视口高度百分比，数值根据你的实际需求调整即可 */
  top: 40vh;
  left: 20vw;
  animation: animate1 7s linear infinite;
}

如果需要微调位置，可以用calc()组合单位，比如top: calc(40vh - 20px)，可以在相对定位的基础上做固定像素的偏移，适配性更好。

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