如何在CSS精灵中缩放图像

在本文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/

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

您可以使用大多数浏览器支持的后台大小(但不是全部http://caniuse.com/#search=background-size)

background-size : 150% 150%;

要么

您可以使用变焦组合进行webkit/ie和transform:scale for Firefox(-moz-)和Opera(-o-),用于跨浏览器桌面和移动设备

[class^="icon-"]{
    display: inline-block;
    background: url('../img/icons/icons.png') no-repeat;
    width: 64px;
    height: 51px;
    overflow: hidden;
    zoom:0.5;
    -moz-transform:scale(0.5);
    -moz-transform-origin: 0 0;
}

.icon-huge{
    zoom:1;
    -moz-transform:scale(1);
    -moz-transform-origin: 0 0;
}

.icon-big{
    zoom:0.60;
    -moz-transform:scale(0.60);
    -moz-transform-origin: 0 0;
}

.icon-small{
    zoom:0.29;
    -moz-transform:scale(0.29);
    -moz-transform-origin: 0 0;
}

使用精灵时,您只能使用精灵中图像的尺寸.background-size斯蒂芬提到的CSS属性尚未得到广泛支持,并且可能会导致IE8及更低版本等浏览器出现问题 - 鉴于其市场份额,这不是一个可行的选择.

解决这个问题的另一种方法是使用两个元素并通过使用img标记来缩放精灵,如下所示:

这样,外部元素(div.sprite-image)从img标记中裁剪出一个20x20px的图像,其作用类似于缩放background-image.

试试这个:Stretchy Sprites - 跨浏览器,响应调整大小/拉伸CSS精灵图像

此方法可以"响应"缩放精灵,以便根据浏览器窗口大小调整宽度/高度.它没有 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

transform: scale(); 将使原始元素保持其大小.

我发现最好的选择是使用vw.它的工作就像一个魅力:

https://jsfiddle.net/tomekmularczyk/6ebv9Lxw/1/

#div1,
#div2,
#div3 {
  background:url('//www.google.pl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat;
  background-size: 50vw;   
  border: 1px solid black;
  margin-bottom: 40px;
}

#div1 {
  background-position: 0 0;
  width: 12.5vw;
  height: 13vw;
}
#div2 {
  background-position: -13vw -4vw;
  width: 17.5vw;
  height: 9vw;
  transform: scale(1.8);
}
#div3 {
  background-position: -30.5vw 0;
  width: 19.5vw;
  height: 17vw;
}

#element {
  width:100%;
  height:50px;
  background:url(/path/to/image.png);
  background-position:140.112201963534% 973.333333333333%;
}