html - 使 Sprite 的图标大小相等(宽度和高度)

Question

我想将图标从 sprite 缩放到相同大小，在 sprite 中它们是不同的。比如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>

请检查我添加了我的代码: 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 像素。通过将 background-size 设置得更小，您可以缩小它。

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

fiddle