可以使用CSS中的@media规则来针对特定的屏幕尺寸设置不同的CSS样式。具体实现方法如下：

HTML代码：

CSS代码：

/* 在这里设置默认样式 */
.image-wrapper {
  position: relative;
}

/* 在这里设置响应式样式 */
@media screen and (max-width: 767px) {
  /* 在这里设置小屏幕样式 */
  .image-wrapper {
    position: static;
  }

  .image-wrapper img {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (min-width: 768px) {
  /* 在这里设置中等屏幕样式 */
  .image-wrapper {
    position: relative;
    max-width: 50%;
  }

  .image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}

@media screen and (min-width: 1200px) {
  /* 在这里设置大屏幕样式 */
  .image-wrapper {
    max-width: 70%;
  }
}

上述代码中，我们使用了三个@media规则，针对不同的屏幕尺寸设置了不同的样式：

1. 对于小屏幕，我们取消了容器的相对定位，设置了图片的最大宽度和自动高度，使图片可以根据屏幕宽度自适应缩放；

2. 对于中等屏幕，我们设置了容器的相对定位和最大宽度，将图片设置为绝对定位，并使用top、left和height属性使其占据容器的全部高度和宽度；

3. 对于大屏幕，我们将容器的最大宽度调整为70%。

通过这样的方式，我们可以让图像元素在不同的响应式屏幕上正确地移动和缩放。