动态CSS Sprite动画大小

Question

我正在开发一个Ionic应用程序，其中一个模板包含精灵动画。动画工作正常，但我使用的任何设备的大小都是固定的。这是我使用的代码：

CSS

#animation_boy {
width: 558px;
height: 1536px;
background-image: url("../img/boy_sprite.png");
-webkit-animation: play 1.2s steps(7) infinite;
animation: play 1.1s steps(7) infinite;

}

@-webkit-keyframes play {
  from {
    background-position: 0px
  }
  to {
    background-position: -3906px
  }
}

@keyframes play {
  from {
    background-position: 0px
  }
  to {
    background-position: -3906px
  }
}

HTML

<div id="animation_boy"></div>

我想让尺寸取决于屏幕。谢谢你的帮助。