2

この質問で説明されているように、複数の css スプライトから構築されたイメージがあります: 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 と単一の画像 (クロスのもの) を使用して簡単に実現できるものに複数の画像を使用するのはなぜですか? 単一の画像は、コンテナー幅のパーセンテージとして、または css3 background-size プロパティを使用して、より簡単にサイズ変更できます。

  2. それぞれに画像を使用する必要がある場合、スプライトをまったく使用しないことを検討できますか? 特に後で誰かがあなたからプロジェクトを奪わなければならない場合、その保守性は純粋に煩わしいものです。

  3. おそらく両方の組み合わせですか？

2 番目のオプションを選択する場合は、data uris を使用することをお勧めします。簡単な説明は次のとおりです: http://css-tricks.com/data-uris/ スプライトよりも 1 つ多くの HTTP リクエストを節約でき、保守が容易で、全体的なサイズの違いは私の正直な意見ではそれほど重要ではなく、サポートは素晴らしいです- IE8+ およびすべての正常なブラウザーが存在します。特に万能の sass インタープリターを使用する場合、設定は簡単ですが、画像を base64 に変換するための気の利いたユーティリティ (コマンドライン、GUI、または Web ベース) がいくつかあります。少しの努力で IE7 をサポートすることもできます。

編集 3.11.12

チェックアウトするオプションにhttp://css3pie.com/を追加することもできます。これにより、私たちが愛し、崇拝する css3 トリックを Internet Explorer で実行できます。私の好みでは少し予測できませんが、このような小さな偉業の場合、間違いなくうまくいきます.

さらに、以下のブラウザ サポートのニーズについてコメントしました。IE7はあなたを止めるものではありません;）

于 2012-10-28T01:40:59.837 に答える
2

webkit/ieのzoomと Firefoxの -moz-transform:scaleの組み合わせを使用できます。

[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

これを実現する方法の1つは、インラインCSSを使用し、JavaScriptまたはPHP/使用するもので属性値を動的に生成することです。

一番上のコンテナの幅とcssスプライトの位置がわかっていると仮定します

左中央と右を計算します

別のファイルでCSSコードを生成することもできます

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

于 2012-11-01T07:10:24.343 に答える
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 は新しいボックス サイズに合わせてスプライトのサイズを変更しないため、無意味な作業のように思えます。

フィドラー: http://jsfiddle.net/hWhUb/4/

于 2012-10-25T10:02:59.103 に答える
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

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 に答える