Question

我想将图标从精灵缩放到相同的大小，在精灵中它们是不同的。像icon-A是48x48，icon-B是60x60，icon-C是70x70。现在我要显示所有这些3到48x48。那可能吗？使用Css或html技巧。我试过了

transform: scale(0.6);
transform-origin:0 0;

<div style="display: inline-block;background-image:url('sprite.png');background-repeat: no-repeat;background-position: -385px -4px;height: 48px;width: 48px;transform: scale(0.6);transform-origin:0 0;"></div>

plz检查我添加了我的代码： http://jsfiddle.net/ut4mo0c8/6/

Answer 1

我粗略计算了第二张图片的样式

element.style {
    display: inline-block;
    background-image: url('https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/03/1-giant.png');
    background-repeat: no-repeat;
    background-position: -15px -316px;
    height: 40px;
    width: 40px;
    background-size: 511px 628px;
}

你的图像真的是591 x 769像素。通过将背景大小设置得更小，您可以缩小它。

棘手的是，你需要重新计算背景位置

fiddle

从精灵等大小（宽度和高度）制作图标

1 个答案: