我如何缩放一个CSS精灵的图像
在这篇文章http://css-tricks.com/css-sprites/中 ，它讲述了如何从一个更大的图像中裁剪一个较小的图像。 你可以告诉我，如果可能的话，我可以裁剪一个较小的图像，然后在裁剪出来之前缩放裁剪掉的区域？
这篇文章是一个例子：
A { background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png); background-position: -10px -56px; } 我想知道如何从spriteme1.png中裁剪出这个图像
以下是该示例的url： http : //css-tricks.com/examples/CSS-Sprites/Example1After/
所以我想知道是否可以让Item1,2,3,4旁边的图标更小？
您可以使用背景大小 ，因为大多数浏览器支持（但不是所有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; }
当你使用精灵，你被限制在精灵中的图像的尺寸。 Stephen提到的background-size CSS属性还没有得到广泛的支持，并且可能会导致像IE8和更低版本的浏览器出现问题 – 并且考虑到它们的市场份额，这不是一个可行的select。
解决这个问题的另一种方法是使用两个元素并通过使用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 。
试试这个： http : //tobyj.net/responsive-sprites/ （演示和解释）
这种方法可以“响应”缩放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>
这是我做的这个。 请记住，它不能在IE8及以下版本。
#element { width:100%; height:50px; background:url(/path/to/image.png); background-position:140.112201963534% 973.333333333333%; }
随着#element的父缩放，背景图片的宽度将缩小。 如果将height转换为百分比，也可以使用height 。 唯一棘手的是找出background-position的百分比。
第一个百分比是当正常宽度除以精灵的总宽度并且乘以100时精灵的目标区域的宽度。
第二个百分比是在缩放之前精灵的目标区域的高度除以精灵的总高度，乘以100。
这两个方程式的措辞有点草率，所以让我知道你是否需要我更好地解释它。
我花了一段时间才解决了这个问题，我很满意：
问题：
-
一个SVG精灵的图标 – 说80px x 3200px
-
我们想要在各种大小的各种地方按比例缩放内容select器（：之前/之后）的每个用途，而不用根据所使用的大小重新定义每个精灵的共同编号。
所以这个解决scheme允许你在一个<button>使用同样的sprite组合作为一个<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%; }
通过在背景位置使用百分比（小数点后两位）而不是像其他人所build议的背景大小，您可以将同一图标声明缩放到任意大小，而无需重新声明。
位置-y百分比是原始精灵高度/图标高度的百分比 – 在我们这里是80px * 100 / 3200px ==每个精灵都是由2.5％的y位置表示的。
如果您有hover/鼠标hover状态，则可以将精灵的宽度加倍，并在位置x坐标中指定。
这种方法的缺点是，在以后添加更多的图标会改变精灵的高度，所以y位置％，但如果你不这样做，那么你的精灵坐标将需要改变你需要的每个缩放分辨率。
尝试使用背景大小： http : //webdesign.about.com/od/styleproperties/p/blspbgsize.htm
有没有什么东西阻止你把图像放在你想要的尺寸上呢？
旧的post，但这是我所做的使用background-size:cover; （帽子提示@Ceylan帕米尔）…
示例用法
水平圈鳍（hover在正面的图像，翻转到不同的图像）。
示例SPRITE
480px x 240px
示例最终尺寸
单张图片@ 120px x 120px
通用代码
.front {width:120px; height:120px; background:url(http://www.example.comhttp://img.dovov.comimage_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:0px 0px;}
.back {width:120px; height:120px; background:url(http://www.example.comhttp://img.dovov.comimage_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:-120px 0px;}
缩写CASE FIDDLE
http://jsfiddle.net/zuhloobie/133esq63/2/
那么我认为find一个更简单的解决scheme来缩放图像：例如 – 可以说有一个图像与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中为我工作，希望它的旧版本也工作..
transform: scale(); 将使原来的元素保持它的大小。
我发现最好的select是使用vw 。 它的工作就像一个魅力：
https://jsfiddle.net/tomekmularczyk/6ebv9Lxw/1/
#div1, #div2, #div3 { background:url('//www.google.plhttp://img.dovov.combranding/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>
将宽度和高度设置为精灵图像的包装元素。 使用这个CSS。
{ background-size: cover; }
容易…在精灵的工作表上使用不同比例的相同图像的两个副本。 根据应用的逻辑设置坐标和大小。
