0

私のクローンを作成するとき

<div id="orig" class="content">this is just some content</div>

それをより小さい固定サイズのコンテナーに追加し、css を使用して適合させます。

#clone {
    transform: translate(...) scale(...)
}

元の空白のラップが与えられた場合、スケールによって要素が完全に収まりますが、これは元の空白のラップを台無しにします。

なぜそうなるのかはわかっていますが、それを回避する方法を見つける必要があります。

言い換えると：

フィドルを考えるとhttp://jsfiddle.net/JAS2K/5/

赤は固定サイズのコンテナの子ですが#badwrap1、下のグレーのように見えるようにする必要があります（つまり、同じ空白ラップを使用）。#desiredwrap

4

1 に答える 1

0

jsFiddle デモ

DOM と CSS を少し変更しましたが、機能しています。

HTML:

<div id="container1" class="content scaled">
    this is just some content
</div>

CSS:

.content {
    background-color:#DDD;
    width:100px;
    height:100px;
    min-height:40px;
}
#container1 {
    display:inline-block;
    background-color:red;
}
.scaled {
    -webkit-transform:translate(-25%, 0) scale(0.5, 1);
    transform: translate(-25%, 0) scale(0.5, 1);
}
于 2013-09-10T12:08:47.133 に答える