使css动画适应不同的屏幕尺寸

Question

考虑following滚动动画：

<div style="height:50px;width:50%;overflow:hidden;border:1px solid red;"><img id="test" style="width:100%;position:relative;top:0px;border:3px solid black" src="https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png"></div>
<style>
#test {
    -webkit-animation: myfirst 3s linear 0s infinite alternate; /* Chrome, Safari, Opera */
    animation: myfirst 3s linear 0s infinite alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from {top:0;}
    to {top:-200px;}
}

/* Standard syntax */
@keyframes myfirst {
    from {top:0;}
    to {top:-200px;}
} 
</style>

我需要在div容器内上下移动图像，以便在图像底部到达div底部时反转滚动方向。为此，我可以在动画参数中设置适当的to top:值。

但是，div容器的宽度为百分比，因此即使图像宽度也会根据屏幕尺寸进行缩放。如何调整代码以使动画在不同宽度的设备上工作？