Questions & Answers

Transform element to fit height (Angular, SCSS)

I am writing a component that accepts a TemplateRef as in @Input() and renders it at some location within the component. The template appears in a container div that has a given width and height that don't necessarily match the aspect ratio of the template. My goal is to stretch (distort) the template to fit the container.

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

I found what is necessary in the SCSS to make this work:

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

The problem is this only works when the container is twice as high as the template, so I need to make the 2dynamic somehow. That's what I am looking for and cannot find. The challenge is the ::ng-deep partm the scale value is something I could calculate in a function.

Does anyone know how to do this or knows a better way of doing it?

I created a Stackblitz to demonstrate

Answers(1) :

Not sure what supposed to be inside the template but in general the approach feels wrong.

Probably something like this should be just enough:

.box-template-container::ng-deep > * {
  width: 100%;
  height: 100%;

or more complex:

.box-template-container {
  position: relative;

.box-template-container::ng-deep > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
2023-01-21 07:42:02
I understand how it feel strange, but I really need to distort (squeeze, stretch) the template element. At the moment, I am using SVGs as the templates but it could be an image, too.
2023-01-21 07:42:02
Would be great if you could replicate the issue on stackblitz and post the link.
2023-01-21 07:42:02
Done, check original post please :)