css - 显示包含具有相同大小的不同大小图像的精灵
问题描述
我在我的应用程序中使用精灵图像。它具有不同尺寸高度和宽度的标志图像。但是我必须在我的网格中显示所有相同大小的标志图像。目前它们以不同的尺寸显示
<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;
}
如何显示所有相同大小高度和宽度的标志?
解决方案
推荐阅读
- magento - 打印 Magento 2 的地址/送货标签
- azure-devops - Azure Devops:拉取请求评论:链接任务
- java - 这是什么意思?爪哇
- google-cloud-platform - InfiniteStreamRecognize 实时 STT 示例不起作用
- optimization - 在运行时用移位替换乘以 2
- amazon-web-services - 选择或汇总针对 Cloudwatch 数据代理指标记录的维度
- wso2 - 我需要在 WSO2 Integration Studio 中应用 Aggregator Mediator
- c++ - 类型转换提升多精度整数返回错误答案
- r - 在 R 中使用 Vaultr 从 Hashicorp Vault 中提取密码
- append - Dataweave 在变换中追加