我可以减小Image Sprite的宽度和高度吗？

Question

我有一个按钮，我使用图像精灵显示图像作为该按钮的背景。但是如何调整背景图像的高度和宽度，这样我就可以使图像居中并将其显示得更小或更大。

我的HTML按钮是：

<input type="button" style="background-image:url(http://s14.postimg.org/cvj2v79gx/csg_539205e53e474.png)" class="sprite-Answer1 callIcons" />

我创建了一个JsFiddle。

Answer 1

在较新的浏览器中，您可以尝试使用background-size：

background-size : 50% 50%;

Answer 2

下载图片，使用照片编辑程序调整图片大小，然后上传到您的服务器+相对网址。

Answer 3

我发现使用background-size最简单：cover。

http://jsfiddle.net/DsXs7/19/

在小提琴中，你可以看到背景精灵的宽度是一半。您需要调整背景位置，以便显示所需的精灵图像。对于ie8及以下，您可能希望添加条件样式表和非恶意图像。

<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="styles-ie.css" /><![endif]-->

在IE样式中，只需使用调整大小的图标即可。不要为此感到难过，因为我不认为任何人在移动设备上使用IE，所以速度不会太冒犯。