如何在CSS精灵中缩放图像

时间：2010-03-12 02:50:45

标签： css css-sprites

在本文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旁边的图标缩小？

14 个答案:

答案 0 :(得分：123)

您可以使用背景大小，因为它支持大多数浏览器（但不是全部http://caniuse.com/#search=background-size）

background-size : 150% 150%;

或

您可以使用缩放的组合进行webkit / ie，并使用转换：缩放进行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;
}

答案 1 :(得分：30)

使用精灵时，仅限于精灵中图像的尺寸。斯蒂芬提到的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标记裁剪一个20x20像素的图像，其行为类似于缩放background-image。

答案 2 :(得分：20)

试试这个：Stretchy Sprites - Cross-browser, responsive resizing/stretching of CSS sprite images

此方法可以“响应”缩放精灵，以便根据浏览器窗口大小调整宽度/高度。 不使用 background-size，因为support在旧浏览器中不存在。

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

答案 3 :(得分：10)

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

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

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

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<div id="div1">
  </div>
  <div id="div2">
  </div>
  <div id="div3">
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：7)

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

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

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

第一个百分比是精灵的目标区域的宽度，当正常宽度除以精灵的总宽度时，再乘以100。

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

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

答案 5 :(得分：4)

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

是否有什么东西阻止你首先以你想要的尺寸渲染图像？

答案 6 :(得分：4)

我花了一些时间来创建解决这个问题的解决方案，我很满意：

问题：

  • 图标的SVG精灵 - 比如80px x 3200px

  • 我们希望在不同大小的不同地方扩展内容选择器（：之前/之后）的各种用途，而不必根据使用的大小重新定义每个精灵的合作。

因此，此解决方案允许您在<button>中使用相同的sprite co-ords作为<menuitem>，同时仍然可以缩放它。

[data-command]::before {
    content: '';
    position: absolute;
    background-image: url("images/sprite.svgz");
    background-repeat: no-repeat;
    background-size: cover;
}

button[data-command]::before {
  width: 32px;
  height: 32px;
}

menuitem[data-command]::before {
  width: 24px;
  height: 24px;
}

[data-command="cancel"]::before {
  background-position: 0% 35%;
}

[data-command="logoff"]::before {
  background-position: 0% 37.5%;
}

通过在背景位置使用百分比（小数点后2位）而不是其他人建议的背景大小，您可以将相同的图标声明缩放到任何大小，而无需重新声明它。

位置y百分比是原始精灵高度/图标高度为％ - 在我们的例子中为80px * 100 / 3200px ==每个精灵由y位置2.5％表示。

如果你有悬停/鼠标悬停状态，你可以加倍精灵的宽度并在position-x坐标中指定。

这种方法的缺点是在以后添加更多图标会改变精灵高度和y位置％，但是如果你不这样做那么你的精灵坐标将需要改变每个缩放分辨率你需要。

答案 7 :(得分：2)

嗯我认为找到了一个更简单的缩放图像解决方案：例子 - 假设有一个图像有3个大小相同的精灵，你想要使用它，使用CSS来缩放图像

background-size : 300% 100%;

然后指定需要应用于html元素的自定义高度和宽度，例如：

 width :45%;
 height:100px;

示例代码如下所示：

.customclass {
    background: url("/sample/whatever.png") 0 0 no-repeat ;
    background-size : 300% 100%;
    width :45%;
    height:100px;
}

我对css很新，造型不是我最好的区域，这可能是错误的做法..但它在Firefox / Chrome / Explorer 10中适用于我，希望它也适用于旧版本.. < / p>

答案 8 :(得分：2)

使用transform: scale(...);并添加匹配的margin: -...px以补偿展开的可用空间。 （您可以使用* {outline: 1px solid}查看元素边界。）

答案 9 :(得分：1)

将宽度和高度设置为精灵图像的包装元素。使用此CSS。 

{
    background-size: cover;
}

答案 10 :(得分：1)

此处为2018。使用背景尺寸和百分比。

表格：

这假设是一排精灵。工作表的宽度应为数字，该数字可被100 +一个小精灵的宽度均匀除以。如果您有30个大小为108x108像素的精灵，请在末尾添加额外的空白以使最终宽度为5508px（50 * 108 + 108）。

CSS：

.icon{
    height: 30px;  /* Set this to anything. It will scale. */
    width: 30px; /* Match height. This assumes square sprites. */
    background:url(<mysheeturl>);
    background-size: 5100% 100%; /*  5100% because 51 sprites. */
}

/* Each image increases by 2% because we used 50+1 sprites. 
   If we had used 20+1 sprites then % increase would be 5%. */

.first_image{
    background-position: 0% 0;
}

.ninth_image{
    background-position: 16% 0; /* (9-1) x 2 = 16 */
}

HTML：

<div class ="icon first_image"></div>
<div class ="icon ninth_image"></div>

答案 11 :(得分：1)

将transform: scale(0.8);与所需的值一起使用，而不是0.8

答案 12 :(得分：0)

这似乎对我有用。

如果精灵位于网格中，请将1设置为100％的精灵数量和100％的精灵数量降低。然后使用int signbit(int)，其中x和y是从零开始的精灵

换句话说，如果您想让左侧和第二排的第三个精灵2向上1向下

background-size

例如，这是一张4x2的精灵表

enter image description here

这是一个例子

background-position -<x*100>% -<y*100>%
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%; }设置为a的百分比，以使子画面的宽度变为100％

换句话说，如果图像的宽度为640px，并且该图像中的精灵的宽度为45px，则使该45px变为640px 

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

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

enter image description here

作为一名图形程序员，我希望偏移100％可以使背景在整个元素上移动100％，换句话说就是完全偏离右侧，但这不是与background-size一起使用时100％的意思。 xScale = imageWidth / spriteWidth xScale = 640 / 45 xScale = 14.2222222222 xPercent = xScale * 100 xPercent = 1422.22222222% 表示右对齐。因此，在扩展后考虑该问题的论坛是

backgrouhnd-position

假设偏移量为31px 

background-position: 100%;

这是一个带有2个子画面的640x480图像。

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

enter image description here

遵循上面针对精灵1的数学运算

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


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

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

答案 13 :(得分：-7)

简单...在精灵表上使用不同比例的相同图像的两个副本。在应用程序的逻辑上设置Coords和大小。

相关问题
最新问题