如何在不缩放内容的情况下缩放 div答案

【问题标题】：How to scale a div without scaling content如何在不缩放内容的情况下缩放 div
【发布时间】：2014-09-16 22:50:13
【问题描述】：

我有这个 div (id="myDiv")，当 div 在 css 下时 - 缩放它的所有子级也在 scale 下。我需要 div 放大但不是孩子，以“创造性的方式”我尝试了 2 件不起作用的事情.. 如何在不缩放内容的情况下缩放 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)");

【问题讨论】：

你能提供一个jsfiddle吗？

标签： jquery html css

【解决方案1】：

您需要向后计算子元素。

例如，您在 x 轴上将 div 缩放 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 Demo

注意：如您所见，还存在转换原点问题以及您需要解决的其他间距问题。

【讨论】：

【解决方案2】：

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

如果可能，我建议您不要使用比例尺，而是尝试手动调整您的父级尺寸。否则，您可以尝试缩放您的父 div，但将您的孩子绝对放置在其中（与父 myDiv 在同一个容器中）

【讨论】：

【解决方案3】：

正如 Paulie_D 所说，您的数学刚刚结束，另外，如果您不想要间距问题，我会将 div 的内容包装在另一个 div 中并控制该 div 的 margin-top，例如

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

这是fiddle

【讨论】：