高分辨率 CSS 精灵

我正在生成 CSS 精灵。我想以多种尺寸使用这些精灵。我已经搜索过，但无法弄清楚如何在功能上缩放 CSS 精灵——例如如果原始精灵的分辨率为 150x150，而我想以 50x50 显示它，我该怎么做？background-size似乎打破了它。

我可以生成所需大小的精灵，但是当我通过 ImageMagick 执行此操作时-resize我的分辨率明显受到影响。通常，如果我发现网页上的图像分辨率低得令人无法接受，我只会制作更大的图像并缩放其大小，从功能上提高图像的分辨率。

由于我不知道如何缩放 CSS 精灵，所以我有点卡住了——如何使用 CSS 精灵实现任意分辨率？

最优雅的方法是使用 CSS3background-size，但并非所有浏览器都支持此功能（例如 IE-mz-, -webkit-, and -o-选择器以在目标浏览器上获得您想要的效果。

最不优雅的方法是伪造精灵比例和位置。

The HTML

<div class="ex3">
    <img src="http://www.placekitten.com/g/600/400"/>
</div>

The CSS

.ex3 {
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 50px;  
}
.ex3 img {
    position: absolute;
    top: -25px;
    left: -25px; 
    width: 150px;  /* Scaled down from 600px */
    height: 100px;  /* Scaled down from 400px */
}

小提琴

http://jsfiddle.net/brettwp/s2dfT/