scale - 使用 CSS Transform Scale 匹配父元素

Question

我有一个元素需要缩放到父元素的 100%。因为该元素包含基于像素的动画和可以缩放的图像，所以我不能使用百分比。有没有办法使用 css transform scale 来做到这一点？

Answer 1

相对 css transform 值是相对于自身(边框框)。例如一些绝对居中的片段:

width: 100px;
height: 200px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

在 Firefox 中，您可以尝试对父元素进行一些修改:

background-image: -moz-element(#yourElementToScale);
background-size: contain;

但如果不在纯 CSS 中使用宽度/高度的百分比，通常是不可能的。如果您想使用 javascript，只需按以下因素进行缩放:

var scaleX = parentElement.offsetWidth / element.offsetWidth;
var scaleY = parentElement.offsetHeight / element.offsetHeight;

应用这个比例因子作为转换看起来像:

transform: scale(scaleX, scaleY);