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

时间:2016-10-12 17:26:10

标签: css

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

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

2 个答案:

答案 0 :(得分:0)

您可以使用background-positionbackground-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>

答案 1 :(得分:0)

您实际上可以使用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

希望它可以帮助你。