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

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

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

【问题讨论】:

  • 缩放包装器是什么意思?如果您想增加包装器的大小,您只需提供宽度和高度属性即可。
  • 结果应该是什么样的? div 内的所有内容都应该表现得好像 div 根本没有缩放?
  • @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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-10-16
      • 2023-01-31
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-01-19
      相关资源
      最近更新 更多