缩放 div 而不改变其子元素的大小和位置答案

【问题标题】：Scale a div without changing the size and position of its child elements缩放 div 而不改变其子元素的大小和位置
【发布时间】：2018-12-17 08:57:24
【问题描述】：

我有一个 div，其中包含一些元素，例如 h 和 p 标签。如何仅缩放包装器 div，而不是内部元素？

 <div class="wrapper" style="padding:50px; transform:scale(1.1)">
      <h2>title</h2>
      <p>description</p>
 </div>

【问题讨论】：

缩放包装器是什么意思？如果您想增加包装器的大小，您只需提供宽度和高度属性即可。
结果应该是什么样的？ div 内的所有内容都应该表现得好像 div 根本没有缩放？
stackoverflow.com/questions/15544645/…的可能重复
@Rahul 我想我会在你链接的那个主题中添加我的答案......

标签： html css

【解决方案1】：

如果您在wrapper 上应用transform，则无法阻止子元素缩放。

⋅ ⋅ ⋅

但是您可以使用 CSS 变量来存储您的比例因子，然后使用 calc 进行计算（比手动进行更好）并为子元素应用反向比例：

.wrapper {
  padding: 0 20px;
  transform: scale(var(--scale));
  background: #ddd;
}

.wrapper > * {
  transform: scale(calc(1/var(--scale)));
}

<div class="wrapper" style="--scale: 1">
  <h2>title</h2>
  <p>description</p>
</div>

<div class="wrapper" style="--scale: 1.2">
  <h2>title</h2>
  <p>description</p>
</div>

<div class="wrapper" style="--scale: 0.8">
  <h2>title</h2>
  <p>description</p>
</div>

⋅ ⋅ ⋅

另一种方法是将包装器样式化和缩放为伪元素。这样，伪元素内部就没有元素，所以没有任何缩放：

.wrapper {
  position: relative;
  padding: 0 20px;
}

.wrapper::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(var(--scale));
  background: #ddd;
}

<div class="wrapper" style="--scale: 1">
  <h2>title</h2>
  <p>description</p>
</div>

<div class="wrapper" style="--scale: 1.2">
  <h2>title</h2>
  <p>description</p>
</div>

<div class="wrapper" style="--scale: 0.8">
  <h2>title</h2>
  <p>description</p>
</div>

【讨论】：

重要提示：所有子项都需要至少是内联块，因为转换不能与内联元素一起使用。我可能会考虑使用子容器来避免这种情况

【解决方案2】：

这是一种有点老套的做法——但它应该会给你想要的东西。我已经包含了一个普通版本和一个缩放版本来显示差异。

实际上，子元素的比例是 1 除以包装元素的比例（例如，对于 1.1 的变换：比例，子元素的比例为 0.90909090909）。

话虽如此，Takit 的答案更好，因为您不必手动计算逆比例。

.wrapper {
padding:50px;
background-color:#eeeeee;
}

.scaled {
transform:scale(1.2);
}

.scaled > * {
transform:scale(0.83333333333);
}

<div class="wrapper">
      <h2>title</h2>
      <p>description</p>
 </div>
 
 
 <div class="wrapper scaled">
      <h2>title</h2>
      <p>description</p>
 </div>

【讨论】：

【解决方案3】：

请检查：-

 :root{
 --scaleVar:2;
 }
.wrapper.scaled {
  padding: 0 20px;
  transform: scale(var(--scaleVar));
  background: #ddd;
}

.wrapper.scaled * {
  transform: scale(calc(1/var(--scaleVar)));
}sform:scale(0.83333333333);
}

<div class="wrapper">
      <h2>title</h2>
      <p>description</p>
 </div>
 
 
 <div class="wrapper scaled">
      <h2>title</h2>
      <p>description</p>
 </div>

【讨论】：