如何缩放div而不缩放内容

Question

我有一个div（id="myDiv"），当div处于css-scale状态时，它的所有子元素也会被缩放。我需要这个div变大，但不希望子元素跟着一起缩放，在尝试了两种无效方法后，我需要一种“创造性”的方式... 如何在不影响其内容的情况下缩放一个div？ HTML

<div id="myDiv">
<h3>Song</h3>
<p>
Strawberry fields forever
</p>
<div>

jQuery

$("#myDiv").css("transform", "scale(2,3)");   
//I tried to...
$("#myDiv").children().css("transform", "scale(-2,-3)");
$("#myDiv").children().css("transform", "scale(0,0)");

- Damkulul

---

你能提供一个 jsfiddle 吗？ - Vangel Tzo

Answer 1

你需要对子元素进行反向计算。

例如，你将div在x轴上缩放200%，...为了将子元素缩小回到100%，你需要缩小到50%（0.5）。

y轴也是如此，缩放300%… 因此为33%（0.3）。 CSS

.scaled { /* the parent */
    transform: scale(2,3);
    transform-origin:top left;
 }

.scaled * { /* the children */
   transform: scale(.5, .33); 
}

Jsfiddle演示

注意：正如你所看到的，还存在变换原点问题和其他间距问题，需要解决。

- Paulie_D

Answer 2

你的数学有些问题，正如Paulie_D所说，如果你不想出现间距问题，我建议你将div的内容包裹在另一个div中，并控制该div的margin-top，例如：

<div id="myDiv">
    <div>
        <h3>Song</h3>
        <p>
            Strawberry fields forever
        </p>
    </div>
</div>

这里有一个fiddle

- bowheart

Answer 3

如果你将比例缩放到0，你的内容将会隐藏，如果你将比例缩放到负值，它将会翻转。子元素将始终从其父元素继承比例，因此为子元素设置比例为1也无济于事。

如果可能的话，我建议你不要使用比例缩放，而是尝试手动调整父元素的大小。否则，你可以尝试缩放父div，但在其中绝对定位你的子元素（与父容器myDiv在同一容器中）。

- Glogo