Css 使用百分比缩放图像精灵：可能吗？

我最近在这里问了另一个关于精灵的问题，我刚刚得到了帮助，但现在我已经让它们正常工作了，我遇到了另一个问题：如何缩放显示的图像

我目前的代码如下：

<div class="index1"></div>

这是按原样工作的基本代码，用于以258*300像素的绝对尺寸显示来自精灵的适当图像。问题是，我还想将宽度设置为40%。以下是我尝试过的：

.index1 {
    margin:auto;
    width:40%;
    max-width:258px;
    height:300px;
    background:url("../Images/index.png") 0px 0px;
}

如果我使用普通图像（即，不是精灵），我只需将宽度设置为40%，图像将很好地缩放到包含的div。这将是一个比率，因此高度也会降低，而不会出现任何失真或图像截断。使用上面的CSS，图像是不缩放的，因为宽度降低了，所以边被切掉了

这里的目的是让宽度根据不同的浏览器宽度进行相应的调整，简单地说，我想复制图像行为，就像简单图像上设置了百分比宽度一样。到目前为止，我在这方面失败了。不，我无法解决缩放问题

编辑：我还应该提到，调整浏览器宽度只会调整图像被剪切的程度

---

解决方案：

首先，这只适用于具有相同大小的多个图像（可能具有相同的比例，但我还没有测试）。因此，我将借助一个假设的例子，尽我所能解释解决方案：

首先，您需要一个占位符图像。此图像的大小或比率必须与要显示的图像相同。图像内容是什么并不重要，但我选择了透明图像

现在，假设您希望在sprite中显示5个图像，它们将显示在您的主页上。我们将这些图像称为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>

我使用类名“stretch15”来显示div的宽度。我使用多个div宽度，因此，我使用了一些任意名称“stretch”，然后使用一个数字来告诉我宽度是多少。因此stretch15告诉我div将是15%宽，如CSS中所示。通过更改这个div的CSS宽度，您实际上复制了它的函数（我知道这不是有效的代码，但这是显示它的最简单方式）

至于sprite1到sprite5，它们在sprite类中都共享相同的样式，所以剩下的就是让我确定从哪个“左”位置开始显示图像。这就是为什么图像的大小必须相同。如果向左移动-100%（或向右移动100%），则应落在第二幅图像的左侧-左移200%可以看到第三个图像，依此类推

---

至于其他的东西，老实说，我不太清楚他们为什么会在那里，除了他们工作的事实。我所做的是查看源代码。此外，如果您有Firebug（Firefox扩展）之类的东西，它确实很有帮助，您可以禁用样式以查看事物是如何受到影响的。这会帮助你理解很多东西。

不太确定我是否完全理解你的意思

如果你想在它的宽度上拉伸（？）图像， 你需要得到你想要被看到的精灵部分的比例

这里的背景大小是

100%232%

。 调整窗口宽度，直到框达到最大宽度：40%

也许更好的例子是保持雪碧和容器的定量：

---

如果您想要一个简单的解决方案，而不必担心交叉浏览器问题，我建议您使用普通图像

接下来，可以使用

数据URI

或最终

您可能还想阅读：

---

希望这有帮助

如果您有一些真实的代码和真实的图像，那么就可以更容易地找出可以/需要做的事情的局限性答案的反馈nice@GCyrillus：对不起。我做两份工作，很难及时做出回应。希望我能很快找到答案。添加了我的解决方案，并试图解释一些事情是如何工作的。希望其他人会发现它有用。我跟踪了你的上一个链接，然后跟踪了托比的帖子中的链接。我不得不做一些修改和查看源代码，但我认为这是为了我。这里的关键词是“思考”。如果我对结果满意的话，我会晚一点编辑我的帖子。非常感谢，伙计。哦，那就是疯狂的谎言；让我回避这一点；别再这样了。

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

.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%
}