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

Posted 2023-03-06

【中文标题】使用百分比缩放图像精灵：可能吗？

【英文标题】：Scaling an image sprite, using percentage: Possible?

【发布时间】：2013-07-01 20:39:48

【问题描述】：

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

我目前的代码如下：

<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% 让您进入第三张图片，依此类推。

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

【问题讨论】：

一些关于答案的反馈会很好

@GCyrillus：对不起。我做两份工作，很难及时回应。希望我能尽快解决。

添加了我的解决方案，并试图解释一下事情是如何工作的。希望其他人会发现它有用

【参考方案1】：

不太确定我是否完全明白你的意思。

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

http://codepen.io/gcyrillus/pen/fjCdD 这里'背景大小是100% 232%。 调整窗口宽度直到框达到 max-width:40%。

也许是精灵和容器的一个更好的例子： http://codepen.io/gcyrillus/pen/KuJDl

【讨论】：

如果你有一些真实的代码和一些真实的图像，就会更容易找出可以/需要做什么的限制

【参考方案2】：

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

接下来，可以使用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

希望这会有所帮助！

【讨论】：

我关注了你的最后一个链接，然后又关注了 tobyj 帖子中的链接。不得不做一些摆弄和查看源代码，但我认为这是为我做的。这里的关键词是'想想。如果我对结果感到满意，我将稍后编辑我的帖子。非常感谢，伙计。

哦，那是疯狂所在；让我回避那个；没有更多了。