Я использую изображение спрайта в своем приложении. Имеет изображения флагов разного размера, высоты и ширины. Но я должен отобразить все изображения флагов с одинаковым размером в моей сетке. В настоящее время они отображаются с различными размерами
<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;
}
Как отобразить все флаги одинакового размера по высоте и ширине?