如何缩放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"

     style="width:20px; height:20px; overflow:hidden; position:relative">

    <!-- set width/height proportionally, to scale the sprite image -->

    <img src="sprite.png" alt="icon"

         width="20" height="80"

         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="#">

  <img class="spacer" alt="" src="spacer.png">

  <img class="sprite" alt="icon" src="sprite_800x160.jpg">

</a>

<a class="stretchy s2" href="#">

  <img class="spacer" alt="" src="spacer.png">

  <img class="sprite" alt="icon" src="sprite_800x160.jpg">

</a>

<a class="stretchy s3" href="#">

  <img class="spacer" alt="" src="spacer.png">

  <img class="sprite" alt="icon" src="sprite_800x160.jpg">

</a>