Angular+SCSS：动态设置Transform缩放值适配容器高度求助

我正在开发一个Angular组件，它接受TemplateRef作为@Input()，并在组件内部指定位置渲染该模板。模板会放在一个固定宽高的容器div中，但容器的宽高比不一定和模板匹配，我的需求是让模板拉伸变形以完全适配容器。

相关HTML代码如下：

<div class="box-content box-background box-template-container">
    <ng-container *ngTemplateOutlet="boxTemplate; context: { box: box }">
    </ng-container>
</div>

我找到了一段SCSS代码可以实现类似效果，但它只能固定缩放比例：

.box-template-container {
    > ::ng-deep * {
        transform-origin: top left;
        transform: scale(1, 2);
    }
}

但这段代码只有在容器高度是模板两倍时才有效，我需要把scale里的数值改成动态计算的值——比如根据容器和模板的宽高比算出对应的缩放系数。不过因为::ng-deep的使用限制，没办法直接把计算后的缩放值绑定到样式里，这是目前卡在的地方。

请问有没有办法实现这种动态缩放适配，或者有更优的解决方案？

内容的提问来源于stack exchange，提问作者user3235738