Question

我有这个div（id =“myDiv”），当div在css下时 - 它的所有孩子都在规模之内。我需要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)");

Answer 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

注意：正如您所看到的，还有转换原因问题以及您需要解决的其他间距问题。

Answer 2

如果您缩放为0，您的内容将隐藏，如果您缩放为negatie值，它将会翻转。子元素将始终从其父元素继承比例，因此将子元素的比例设置为1也不会有任何帮助。

如果可能，我建议您不要使用比例尺，但请尝试手动调整您的父母尺寸。否则你可以尝试扩展你的父div，但绝对将你的孩子放在它里面（与父myDiv在同一个容器中）

Answer 3

你的数学就好了，正如Paulie_D所说的那样，如果你不想要间距问题，我会将div的内容包装在另一个div中并控制div的边缘 - 顶部，例如

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

这里是fiddle

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

3 个答案: