Css Sprite 图片等比缩放图片大小_cocos sprite 等比缩放-CSDN博客

总的拼合大图是256px * 46px，现在取某特定小图标缩放改为32px * 23px的图片作为图标。改为如下图所示:

原图：

在我们的实例中,我们使用底部菜单大小32px * 23px.为了保证普通显屏设备的图像显示，在这个图像的基础上做了一半的缩小。

在最初的CSS样式中，background-position的属性值都不需要进行任何设置，因为他们的默认值都是“0”，如下所示：

.x-navbar [class^='x-icon-'] {
   background-image: url(img/icon_navbar_new_year.png);
   width: 32px;
   height: 23px;
}

因此，最关键的问题是，我们怎么知道background-size属性值要设置为多少？

这里有一个公式：
高分辨率图像宽度 / 目标图像宽度 = X
原始Sprites图像宽度 / x = background-size的宽度值

我们高分辨率下的图标是256px * 46px;
我们目标图像的宽度是“46px”；
我们Sprites图像的总宽度是“256px”

根据前面的公式可以得知
46/23 = 2 （高等比为2）
256/2 = 128 （进而得到宽）

最后的一件事情。我们只计算了背景图像的宽度值，为了确保背景图像缩放比例正常，我们将“height”值设置为“auto”。当然你也可以设置相的的值（设置background-sizer的宽度为auto，高度为具体值），但我发现设置宽度会比较容易。

.x-navbar [class^='x-icon-'] {
    background-size: 128px auto;
}

然后就是根据图片的位置坐标进行显示了：（所有位置也都 ÷2）

.x-icon-shouye {background-position: 0 0;}
.x-icon-dingdan {background-position: -32px 0;}
.x-icon-gouwuche {background-position: -64px 0;}
.x-icon-gengduo {background-position: -96px 0;}

这样就实现了图中的效果了！

亲测简写：

【CSS sprite多图拼合图标 —— 等比例缩放】
原来图标52 * 52，现要改为32 * 32，总的大图是200 *700。

52/32=1.6 200/1.6=125

css写法：
.icons-tag span {

width: 32px;
height: 32px;
background: url(../img/common/tag.png) no-repeat;
background-size: 125px auto;

}
.icons-tag span.tag1 {
background-position: 0 0;
}

.icons-tag span.tag2 {
background-position: 0 -37px; //原来是60,60/1.2=37.5
}