Question

我有这个

.main
 { transform : scale(0.3); }

但这只是元素本身的比例，我想要的是高度：30％我一直尝试这样：

transform : scale(30%);

和

transform : scale(calc(30%));

但是，显然，这没用

Answer 1

我发现了一个技巧。只需创建一个超级容器即可。我将其设置为父级大小的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>

Answer 2

Transform仅与元素本身相关，根本不考虑父元素，因此以完全动态的方式进行变换是不可能的。

使用transform的唯一方法是使用一些非常固定的值（非动态值），例如，使子级和父级的大小相同，然后在子级上使用transform(.3)。

对于更动态和灵活的方式，应使用宽度/高度，字体大小等。