如何缩放CSS Sprite中的图像

Question

在本文http://css-tricks.com/css-sprites/中，它讨论了如何从1个较大的图像中裁剪出较小的图像。您能否告诉我是否有可能/如何裁剪出较小的图像，然后在进行布局之前缩放裁剪的区域？

这是该文章的示例：

A

{

  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);

  background-position: -10px -56px;

}

我想知道从spriteme1.png裁剪图像后如何缩放图像

这是示例的网址：http : //css-tricks.com/examples/CSS-Sprites/Example1After/

所以我想知道是否可以缩小项目1,2,3,4旁边的图标？

Answer 1

使用精灵时，仅限于精灵中图像的尺寸。background-sizeStephen提到的CSS属性尚未得到广泛支持，并且可能会导致IE8及以下版本的浏览器出现问题-考虑到它们的市场份额，这不是一个可行的选择。解决该问题的另一种方法是使用两个元素并通过将其与img标记一起使用来缩放子画面，如下所示：<div class="sprite-image"&nbsp; &nbsp; &nbsp;style="width:20px; height:20px; overflow:hidden; position:relative">&nbsp; &nbsp; <!-- set width/height proportionally, to scale the sprite image -->&nbsp; &nbsp; <img src="sprite.png" alt="icon"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width="20" height="80"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;style="position:absolute; top: -20px; left: 0;" /></div>这样一来，外部元素（div.sprite-image）从img标记中裁剪了20x20px的图像，其作用就像是scaled background-image。

Answer 2

尝试以下方法：可伸缩的Sprites-跨浏览器，可响应地调整大小/拉伸CSS Sprite图像此方法“响应式”缩放精灵，以便根据浏览器窗口的大小调整宽度/高度。它不被使用， background-size因为在较旧的浏览器中不存在对此的支持。的CSS.stretchy {display:block; float:left; position:relative; overflow:hidden; max-width:160px;}.stretchy .spacer {width: 100%; height: auto;}.stretchy .sprite {position:absolute; top:0; left:0; max-width:none; max-height:100%;}.stretchy .sprite.s2 {left:-100%;}.stretchy .sprite.s3 {left:-200%;}的HTML<a class="stretchy" href="#">&nbsp; <img class="spacer" alt="" src="spacer.png">&nbsp; <img class="sprite" alt="icon" src="sprite_800x160.jpg"></a><a class="stretchy s2" href="#">&nbsp; <img class="spacer" alt="" src="spacer.png">&nbsp; <img class="sprite" alt="icon" src="sprite_800x160.jpg"></a><a class="stretchy s3" href="#">&nbsp; <img class="spacer" alt="" src="spacer.png">&nbsp; <img class="sprite" alt="icon" src="sprite_800x160.jpg"></a>