css3スケールの周りの空白

質問

私は修正したい小さな問題を抱えていますが、良い答えを見つけることができません。

私は（他のDivを含む）Divでスケールを使用すると、それは私のdivの"オリジナル"幅と高さから、周りに白いスペースを残します。

拡大縮小中に div の周囲のウィッチスペースを取り除くにはどうすればよいですか？

必要であれば、jsを使用することができます!

EDIT: ここにいくつかのコードがあります。

HTML

<div class="pull-right nextpack">

                    <div class="quarter scale-thumb">

                        <div class="up">
                            <div class="inner" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                        </div>

                        <div class="face">
                            <div class="top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                            <div class="bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                        </div>

                        <div class="cote-droit">
                            <div class="inner">
                                <div class="cote-droit-top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                                <div class="cote-droit-bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                            </div>
                        </div>

                    </div>


                </div>

CSS (このパックがどのように行われるかを知る必要はありません。基本的に、平面テンプレートから3Dレンダリングを行うために、多くのCSS3を無駄に使用しています。)

.quarter.scale-thumb
{
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}

PS : 最初の写真は、scale-thumb クラスを追加していない場合です。

どのように解決するのですか？

解決策は、要素をコンテナで囲み、scale()が実行されている間にそのコンテナもリサイズすることです。

Jsfiddleのデモです。 http://jsfiddle.net/2KxSJ/

の関連コードは

#wrap
{
    background:yellow;
    height:66px;
    width:55px;
    padding:10px;
    float:left;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    /* more transition here */
}

#wrap:hover
{
    height:300px;
    width:260px;
}

.quarter
{
    padding:20px;
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -o-transform: scale(0.2);
    transform: scale(0.2);
    background:red;
    width:250px;
    -webkit-transform-origin:left top;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    /* more transition here */
}


#wrap:hover .quarter
{
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transform-origin:left top;
    -moz-transform-origin:left top;
    /* more transform-origin */
}