如何仅放大外部div而不是内部div

Question

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

这是我的代码

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

在这里，我放大了div1，但是div2也被放大了。我只想放大div1而不是div2，这意味着div2的内容仍将按原样显示。

- bhumiraj parmar

Answer 1

您可以添加-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>

- z0mBi3

---

在Chrome中运行良好，但在IE / mozilla中无法正常工作 :( - Naik Ashwini

你需要为transform属性使用浏览器前缀： -ms-transform: scale(0.3125); -moz-transform: scale(0.3125); -webkit-transform: scale(0.3125); transform: scale(0.3125); - z0mBi3

Answer 2

您可以通过在子元素上应用倒数比例值来反转CSS scale，例如，如果父元素上有transform: scale(4);，则需要在子元素上使用比例为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 的倒数。

- andreas