显示包含相同大小的不同大小图像的精灵

Question

我在应用程序中使用了精灵图片。它具有不同大小的高度和宽度的标志图像。但是我必须在网格中显示所有具有相同大小的标志图像。当前它们以不同的尺寸显示

<div ng-repeat="i in arr">
  <img class="img-{{i.id}}" /> {{i.name}}
</div>
var arr = [{
    id: 1,
    name:: test1
  },
  {
    id: 2,
    name:: test2
  },
  {
    id: 3,
    name:: test3
  },
  {
    id: 4,
    name:: test4
  }
]

CSS

.img-1 {
  width: 810px;
  height: 540px;
  background: url('./../images/sprite.png') -12530px -4970px;
}

.img-2 {
  width: 1200px;
  height: 600px;
  background: url('./../images/sprite.png') -10390px -3730px;
}

.img-3 {
  width: 320px;
  height: 320px;
  background: url('./../images/sprite.png') -8780px -8030px;
}

.img-4 {
  width: 1000px;
  height: 500px;
  background: url('./../images/sprite.png') -4718px -11840px;
}

如何显示高度和宽度相同的所有标志？