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

时间:2018-12-17 08:57:24

标签: html css css3

我有一个div,其中包含一些元素,例如hp标签。如何仅缩放包装div而不缩放内部元素?

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

3 个答案:

答案 0 :(得分:4)

如果在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>

答案 1 :(得分:0)

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

有效地,子元素的比例是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>

答案 2 :(得分:0)

请检查:-

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