CSS变换比例

Question

我有一个元素需要扩展为父元素的100％。因为元素包含基于像素的动画，图像可以缩放，所以不能使用百分比。无论如何使用css转换比例吗？

Answer 1

相对 css转换值相对于自身（border-box）。例如，一些绝对的中心片段：

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);