我刚刚收到了我最近在这里提出的关于精灵的另一个问题的帮助，但是现在我让它们正常工作，我遇到了另一个问题：如何缩放显示的图像？
我目前的代码如下：
<div class="index1"></div>
和 CSS：
img.index1 {
margin:auto;
width:258px;
height:300px;
background:url("../Images/index.png") 0px 0px;
}
这是按原样工作的基本代码，以 258*300 像素的绝对尺寸显示来自精灵的适当图像。问题是，我还想将宽度设置为 40%。这是我尝试过的：
.index1 {
margin:auto;
width:40%;
max-width:258px;
height:300px;
background:url("../Images/index.png") 0px 0px;
}
如果我要使用普通图像（即不是精灵），我只需将宽度设置为 40%，图像就可以很好地缩放到包含的 div。这将是一个比率，因此高度也会降低，而不会出现任何失真或图像截断。使用上面的 CSS，图像是未缩放的，并且因为宽度降低了，所以边被切掉了。
这里的目的是根据不同的浏览器宽度相应地调整宽度，简单地说，我想复制图像行为的方式与使用设置了百分比宽度的简单图像完全相同。到目前为止，我一直失败。不，我无法解决缩放问题。
编辑：我还应该提到，调整浏览器宽度只会调整多少图像被切断。
解决方案：
首先，这仅适用于您有多个相同尺寸的图像（可能具有相同的比例，但我没有测试过）。因此，我将在一个假设示例的帮助下尽我所能解释解决方案：
首先，您需要一个占位符图像。此图像必须与您要显示的图像具有相同的大小或比例。图像内容是什么无关紧要，但我使用的是透明图像。
现在，假设您想要 5 张图片在您的 sprite 中，它们将显示在您的主页上。我们将这些图像称为 index1.png、index 2.png 等。这是显示它的 HTML：
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite1" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite2" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite3" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite4" src="Images/index.png" />
</div>
<div class="stretch15">
<img class="trans" src="Images/trans.png">
<img class="sprite sprite5" src="Images/index.png" />
</div>
您会注意到一个 div 中有两个图像。稍后我将了解 div 类名的意义。trans 类显示透明图像，“sprite sprite5”类显示实际图像。我为这个图像分配了两个类，只是为了将我的 CSS 中的行数保持在最低限度，并使全局图像更改更加简单。您还会注意到，五个 div 的内容之间的区别仅仅是第二个图像的第二个类名称从 sprite1 更改为 5。我稍后也会解释这一点。
现在对于 CSS：
.stretch15 {
width:15%;
max-width:258px;
overflow:hidden;
position:relative;
margin:0px auto;
display:block;
}
.trans {
width:100%;
height:auto;
display:block;
margin:0;
padding:0;
}
.sprite {
position:absolute;
top:0;
max-width:none;
max-height:100%;
display:block;
}
.sprite1 {
left:0;
}
.sprite2 {
left:-100%;
}
.sprite3 {
left:-200%;
}
.sprite4 {
left:-300%;
}
.sprite5 {
left:-400%
}
我使用类名“stretch15”来显示 div 的宽度。我使用多个 div 宽度，所以我使用了一些任意名称“拉伸”，然后使用一个数字让我知道宽度是多少。因此，stretch15 告诉我 div 将是 15% 宽，如 CSS 中所示。通过更改此 div 在 CSS 中的宽度，您基本上复制了它的功能（我知道这不是有效的代码，但它是显示它的最简单方法）。
至于 sprite1 到 5，它们在 sprite 类中都共享相同的样式，所以剩下的就是让我确定从哪个“左”位置开始显示图像。这就是为什么图像必须全部相同的原因。如果您向左移动 -100%（或向右移动 100%），您应该落在第二张图像的左侧。剩下的 -200% 让您进入第三张图片，依此类推。
至于其余的东西，老实说，我不太确定他们为什么在那里，除了他们工作的事实。我所做的是在这里查看源代码。此外，如果你有像 Firebug（Firefox 扩展）这样的东西，它真的很有帮助，你可以在其中禁用样式以查看事情是如何受到影响的。它会帮助你理解很多。