Question

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

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

Answer 1

如果在transform上应用wrapper，则不能阻止子元素缩放。

⋅ ⋅ ⋅

但是您可以使用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>

Answer 2

这是一种有点古怪的方式-但这应该可以为您提供所需的东西。我提供了一个普通版本和一个缩放版本以显示差异。

有效地，子元素的比例是1除以包装元素的比例（因此，对于transform：scale为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>

Answer 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>

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

3 个答案: