我有一个div,其中包含一些元素,例如h
和p
标签。如何仅缩放包装div
而不缩放内部元素?
<div class="wrapper" style="padding:50px; transform:scale(1.1)">
<h2>title</h2>
<p>description</p>
</div>
答案 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>