Question

我刚收到另一个问题，我最近在这里询问有关精灵的问题，但现在我让它们正常工作，我遇到了另一个问题：如何缩放显示的图像？

我目前的代码如下：

<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张图片，它们将显示在您的主页上。我们将这些图像称为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宽度，所以，我使用了一些任意名称'stretch'，然后是一个数字让我知道宽度是多少。所以stretch15告诉我div将是15％宽，如CSS中所见。通过改变CSS中这个div的宽度，你基本上复制了函数（我知道它不是有效的代码，但它是显示它的最简单的方法）。

对于sprite1到5，它们在精灵类中共享相同的样式，所以剩下的就是让我确定哪个“左”位置开始显示图像。这就是图像必须具有相同尺寸的原因。如果向左移动-100％（或向右移动100％），则应该落在第二张图像的左侧。 -200％左边会让你到第三张图片，依此类推。

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

Answer 1

如果您想要一个简单的修复而不用担心交叉浏览器问题，我建议使用普通图像。

接下来，可以使用data URIs 或 use a combo of zoom for webkit/ie and -moz-transform:scale for Firefox 或最后break your head on background-size calculations。

您可能还想阅读：How can I scale an image in a CSS sprite

希望这有帮助！

Answer 2

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

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

http://codepen.io/gcyrillus/pen/fjCdD此处'background-size为100% 232%。调整窗口宽度，直到最大宽度：40％。

可能是一个更好的例子，保持精灵和容器的比例： http://codepen.io/gcyrillus/pen/KuJDl

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

2 个答案: