Html 如何将动画图片放置在固定的矩形内？

我想把一个图像放在一个矩形内，当矩形静止不动时，让图像向右移动。我的问题是，如果矩形不移动，我无法将图像放入矩形中。我得到了我想要的特定屏幕大小的结果 通过使用边距和定位图像，但当我调整窗口大小时，它将不在同一位置

如何将它保持在图像中矩形内的同一位置

body{
边际：0px；
}
.顶架{
高度：5vh；
宽度：100vw；
背景色：rgb（40、121、197）；
不透明度：50%；
}
.标志大纲{
边界半径：35px；
边框：5px实心rgba（4,22,29,0.137）；
宽度：130px；
身高：130；
利润率最高：1%；
左缘：3%；
填充：30px；
}
.旋转标志{
位置：绝对位置；
最高：7%；
左：3%；
过渡：所有4s；
-webkit过渡：所有4s；
变换：平移（130px，0）；
-webkit转换：翻译（130px，0）；
背景图片：url（'owl-logo.png'）；
}
.文本标题{
文本对齐：居中
}

酷名
酷标题

您可以尝试的一件事就是让图像留在div中，让它像平常一样在页面上流动。如果图像正好位于div中，则应自动调整其大小以适合其内容。然后可以使用CSS属性（如边距或变换）影响图像的位置

#徽标轮廓{
边界半径：35px；
边框：5px实心rgba（4,22,29,0.137）；
宽度：130px；
填充：2px；
}
#旋转标志{
高度：70像素；
过渡：100毫秒；
}
#徽标轮廓：悬停#旋转徽标{
变换：translateX（60px）；/*130px-70px宽度*/
}

---

Hi。您能否生成所需输出实例的示例？