时间戳

首页 > 解决方案 > 在纯 CSS 中按父大小的百分比进行 trasform 缩放

css - 在纯 CSS 中按父大小的百分比进行 trasform 缩放

问题描述

我有这个

.main
 { transform : scale(0.3); }

但这是元素本身的比例，我想要的是 height:30% 我一直这样尝试：

transform : scale(30%);

和

transform : scale(calc(30%));

但是，显然，这没有用

标签： css

解决方案

我找到了一个技巧来做到这一点。只需创建一个超级容器。我将其设置为父大小的 100%（在我的情况下，内容超出范围，因此我也可以使用绝对定位以获得更好的结果）

.v {
  background-color:red;
  width:100px;
  height:100px;
}

.c {
  width:100%;
  height:100%;
  transform:scale(.5);
}
<div class='c'>
<div class='v'>
  
</div>
</div>

推荐阅读