Question

我有一个包含所有32 x 32图像的精灵，我在我的项目中使用它们，但在某些地方，我希望图像为64 x 50而不是32 x 32.现在，我该怎么做才能使用CSS 。有没有办法做到这一点？

任何帮助将不胜感激。感谢。

Answer 1

您可以使用background-position和background-size属性的组合。

在此示例中，原始图像为50X50，背景设置为100X100和100X75（拉伸）：

#a1 {
  background: url(https://dummyimage.com/50x50/000/fff);
  width: 100px;
  height: 100px;
  background-position: 0 0;
  background-repeat: no-repeat;
  border: 1px solid red;
  background-size: 100px 100px;
}
#a2 {
  background: url(https://dummyimage.com/50x50/000/fff);
  width: 100px;
  height: 75px;
  background-position: 0 0;
  background-repeat: no-repeat;
  border: 1px solid red;
  background-size: 100px 75px;
}

<div id="a1"></div>
<br />
<div id="a2"></div>

Answer 2

您实际上可以使用transform: scale()属性来缩放精灵中的图像，或者您可以使用css的新zoom属性。

例如：如果您的图像为32 x 32并且想要将其缩放为64 x 64.简单乘以2就可以了。所以，你会使用如下的东西：

transform: scale(2.0); // multiplies both coordinates and you will get your scaled image of 64 x 64.

或者您只需执行zoom: 2;

即可

现在，在你的情况下，你想要以不同的方式x轴和y轴以不同的方式暗示x为宽度，y为高度。你可以这样做：

transform: scaleX(2.0);
transform: scaleY(1.5625);

应该做的诀窍:)

还有一件事，Firefox尚不支持缩放属性，这非常奇怪，但所有浏览器都支持缩放。

支持：
CSS Zoom
Scale

希望它可以帮助你。

如何缩放精灵中的图像大小

2 个答案: