如何在CSS精灵中缩放图像

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/

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

Answer 1

您可以使用大多数浏览器支持的后台大小(但不是全部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;
}

Answer 2

使用精灵时,您只能使用精灵中图像的尺寸.background-size斯蒂芬提到的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的图像,其作用类似于缩放background-image.

Answer 3

试试这个: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

<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>

Answer 4

这似乎对我有用。

如果精灵在网格中，设置background-size为 100% 的精灵数量和 100% 的精灵数量。然后使用background-position -<x*100>% -<y*100>%其中 x 和 y 是基于零的精灵

换句话说，如果你想要左边的第三个精灵和第二行的 2 上和 1 下所以

background-position: -200% -100%;

例如，这里有一个精灵表 4x2 精灵

这是一个例子

background-position: -200% -100%;

div {
  margin: 3px;
  display: inline-block;
}
.sprite {
  background-image: url('https://i.stack.imgur.com/AEYNC.png');
  background-size: 400% 200%;  /* 4x2 sprites so 400% 200% */
}
.s0x0 { background-position:    -0%   -0%; }
.s1x0 { background-position:  -100%   -0%; }
.s2x0 { background-position:  -200%   -0%; }
.s3x0 { background-position:  -300%   -0%; }
.s0x1 { background-position:    -0%  -100%; }
.s1x1 { background-position:  -100%  -100%; }
.s2x1 { background-position:  -200%  -100%; }
.s3x1 { background-position:  -300%  -100%; }

如果精灵的大小不同，您需要将background-size每个精灵的设置为百分比，以便精灵的宽度变为 100%

换句话说，如果图像是 640px 宽，并且该图像内的精灵是 45px 宽，那么让 45px 为 640px

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

然后你需要设置偏移量。偏移的复杂性是 0% 左对齐，100% 右对齐。

作为一名图形程序员，我希望 100% 的偏移量可以将背景 100% 移动到元素上，换句话说，完全远离右侧，但这不是 100% 与backgrouhnd-position. background-position: 100%;表示右对齐。因此，在缩放后考虑到这一点的论坛是

xOffsetScale = 1 + 1 / (xScale - 1)              
xOffset = offsetX * offsetScale / imageWidth

假设偏移量为 31px

xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603

这是带有 2 个精灵的 640x480 图像。

1. 31x 27y 尺寸 45w 32h
2. 500x 370y 尺寸 105w 65h

按照上面的数学计算精灵 1

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603

yScale = imageHeight / spriteHEight
yScale = 480 / 32
yScale = 15
yPercent = yScale * 100
yPercent = 1500%

yOffsetScale = 1 + 1 / (15 - 1)
yOffsetScale = 1.0714285714285714
yOffset = offsetY * yOffsetScale / imageHeight
yOffset = 27 * 1.0714285714285714 / 480
yOffset = 0.06026785714285714
yOffsetPercent = 6.026785714285714

<div class="sprite s3x1" style="width: 45px; height:20px"></div>
<div class="sprite s3x1" style="width: 128px; height:30px"></div>
<div class="sprite s3x1" style="width: 64px; height:56px"></div>
<div class="sprite s2x1" style="width: 57px; height:60px"></div>
<div class="sprite s3x0" style="width: 45px; height:45px"></div>
<div class="sprite s0x1" style="width: 12px; height:100px"></div>

<br/>
<div class="sprite s0x0" style="width: 45px; height:20px"></div>
<div class="sprite s1x0" style="width: 128px; height:45px"></div>
<div class="sprite s2x0" style="width: 64px; height:56px"></div>
<div class="sprite s3x0" style="width: 57px; height:60px"></div>
<br/>
<div class="sprite s0x1" style="width: 45px; height:45px"></div>
<div class="sprite s1x1" style="width: 12px; height:50px"></div>
<div class="sprite s2x1" style="width: 12px; height:50px"></div>
<div class="sprite s3x1" style="width: 12px; height:50px"></div>

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

Answer 5

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;
}

<div id="div1">
  </div>
  <div id="div2">
  </div>
  <div id="div3">
  </div>

Answer 6

这就是我做的事情.请记住,它不适用于IE8及以下版本.

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

背景图像的宽度将缩小为缩小的父#element级.如果转换height为百分比,也可以对其高度执行相同的操作.唯一棘手的问题是找出百分比background-position.

第一个百分比是精灵的目标区域的宽度,当正常宽度除以精灵的总宽度,并乘以100.

第二个百分比是缩放前精灵的目标区域的高度除以精灵的总高度,再乘以100.

关于这两个方程的措辞有点草率,所以如果你需要我更好地解释它,请告诉我.

Answer 7

旧帖子，但这是我使用的background-size:cover;（@Ceylan Pamir的提示）...

示例用法
水平的圆形挡板（悬停在正面图像上，以不同的图像向后翻转）。

示例SPRITE
480px x 240px

最终尺寸示例
单个图片@ 120px x 120px

通用代码
.front {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:0px 0px;}

.back {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:-120px 0px;}

摘要案例案例
http://jsfiddle.net/zuhloobie/133esq63/2/

Answer 8

尝试使用背景大小：http ://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

是否有什么因素阻止您首先按照您想要的尺寸渲染图像？