使用 CSS Transform Scale 匹配父元素

【问题标题】：Using CSS Transform Scale to match the parent element使用 CSS Transform Scale 匹配父元素
【发布时间】：2014-03-05 23:29:45
【问题描述】：

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

【问题讨论】：

【解决方案1】：

相对 css 变换 值是相对于自身（边框）。例如一些绝对居中 sn-p:

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

【讨论】：