2

我有一个由多个 css sprites 构建的图像，如以下问题所述：css image building with sprites

我将如何使用它以便我可以在顶部容器上应用一个大小来动态调整所有子级的大小？

这是到目前为止的工作小提琴：http: //jsfiddle.net/hWhUb/3/

这是当前的html结构：

<div class="icon">
    <div class="brigade brigade-purple-left">&nbsp;</div>
    <div class="brigade brigade-purple-middle">&nbsp;</div>
    <div class="brigade brigade-purple-right">&nbsp;</div>
    <div class="icon-type icon-hero">&nbsp;</div>
</div>​
4

6 回答 6

3

我有几个问题，可能会导致解决方案：

  1. 为什么要使用多个图像来使用一些 css3 和单个图像（cross thingie）可以轻松实现？单个图像可以更容易地调整大小，作为容器宽度的百分比，甚至使用 css3 background-size 属性。

  2. 如果您必须为每件事使用图像，您是否可以考虑永远不要使用精灵？它的可维护性是纯粹的烦恼，特别是如果有人后来不得不把这个项目从你手中夺走。

  3. 也许两者兼而有之？

如果选择第二个选项，我建议使用 data uris。这里有一个简短的解释： http ://css-tricks.com/data-uris/ 它比 sprites 节省了一个 http 请求，更易于维护，而且总体大小的差异在我看来是微不足道的，并且支持很棒- IE8+ 和我们那里所有健全的浏览器。设置很容易，特别是如果您使用全能的 sass 解释器，但有一些漂亮的实用程序（命令行、gui 甚至基于 Web）可以将您的图像转换为 base64。它甚至可以用一点点努力支持IE7！

编辑 3.11.12

您还可以将http://css3pie.com/添加到选项中以查看 - 它可以让您使用 Internet Explorer 执行我们非常喜欢和喜欢的 css3 技巧。这对我来说有点难以预测，但对于像这样的小壮举，它绝对可以做到这一点。

此外，我在下面评论了您的浏览器支持需求。IE7 不会阻止你；）

于 2012-10-28T01:40:59.837 回答
2

您可以将缩放组合用于 webkit/ie 和-moz-transform:scale用于 Firefox

[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;
}
于 2013-04-18T10:56:01.340 回答
1

One of the ways to achieve it will be to use inline CSS and to dynamically generate attribute values in JavaScript or PHP/What you use.

Assuming you know the width of the top container and the position of the css sprites

Calculate the left middle and right

You can also opt to generate the CSS code in a separate file

http://aquagraphite.com/2011/11/dynamically-generate-static-css-files-using-php/

于 2012-11-01T07:10:24.343 回答
0

您可以使用 css3 2d 转换：

.icon {
 transform: scale(2);
 -ms-transform: scale(2); /* IE 9 */
 -webkit-transform: scale(2); /* Safari and Chrome */
 -o-transform: scale(2); /* Opera */
 -moz-transform: scale(2); /* Firefox */
}

并使用以下命令更改变换原点：transform-origin

于 2012-10-29T15:18:48.730 回答
0

虽然你想做的事情可以完成，但我认为你的做法是错误的。它比它需要的复杂得多，但这个想法是合理的。

看着你的精灵，唯一不能用 CSS 改变的是实际的图标（艺术品）。圆角和背景颜色——那是另一回事。

CSS

.icon-cross {
    background:purple url('cross.jpg') no-repeat 40px 12px;
    border-radius:5px;
    border:1px solid gray
}

@media only screen and (max-width:768px) {
    .icon-cross {
        background-size: 800px 1200px;
        background-position; ??px ??px
    }
}

@media only screen and (max-width:400px) {
    .icon-cross {
        background-size: 500px 900px;
        background-position; ??px ??px
    }
}

HTML

<div class="icon-cross"></div>
于 2012-10-29T02:47:38.573 回答
0

使用一点 jQuery，我可以将元素调整为您想要的任何大小（resizeTo）：

$(document).ready(function () {
    $('#resize').click(function (e) {
        e.preventDefault();
        var resizeTo = 100,
            resizeRatio = Number(resizeTo) / Number($(".icon").width());

        $(".icon").css('width', resizeTo);
        $(".child").each(function () {
            var childWidth = Number($(this).width()),
                childHeight = Number($(this).height()),
                newChildWidth = childWidth * resizeRatio,
                newChildHeight = childHeight * resizeRatio;
            $(this).css({ 'width': newChildWidth, 'height': newChildHeight });
        });
    });
});​

然而，size 不会调整 sprite 的大小以适应新的盒子大小，所以这似乎是一项毫无意义的任务。

提琴手：http: //jsfiddle.net/hWhUb/4/

于 2012-10-25T10:02:59.103 回答