如何仅缩放外部 div 而不是内部 divs

Question

我使用 -moz-transform: scale(3.2) 缩放 div，但我只想缩放外部 div 而不是 [=] 中的内容（其他 divc） 27=]。

这是我的代码

<div id="div1" style="-moz-transform: scale(3.2);" >
    <div id="div2">
        content
    </div>
</div>

这里我缩放了 div1，但是 div2 也缩放了。我只想缩放div1而不是div2，也就是说div2的内容还是会原样显示

Answer 1

您可以通过在 child 上应用倒数比例值来反转 CSS scale，例如如果 parent 上有 transform: scale(4);，则 child 上需要缩放 1/4：transform: scale(0.25);:

div {
  width: 50px;
  height: 50px;
}
#div1 {
  transform: scale(4);
  border: 1px solid red;
  margin: 100px;
}
#div2 {
  transform: scale(0.25);
  border: 1px solid green;
}

<div id="div1">
  <div id="div2">
    content
  </div>
</div>

在你的情况下，你需要 transform: scale(0.3125);，3.2 的倒数。

Answer 2

您可以添加 -moz-transform: scale(0.3125) 来偏移父比例。基本上 0.3125 = 1 / 3.2 其中 3.2 是应用于父级的比例因子。

<div id="div1" style="-moz-transform: scale(3.2);-webkit-transform: scale(3.2); transform: scale(3.2);" >
         <div id="div2" style="-moz-transform: scale(.3125);-webkit-transform: scale(.3125); transform: scale(.3125);">
             content
           </div>
  </div>

如何仅缩放外部 div 而不是内部 divs

how to Zoom only outer div not inner divs

html

css

zooming