Estoy trabajando para hacer que el contenido de una página se escale manteniendo las proporciones consistentes de acuerdo con algunos puntos de interrupción habituales. Coloqué un detector de eventos en la ventana donde ejecuto mi función que calcula X e Y de una escala de transformación y traducción de transformación del elemento que envuelve mi contenido.

¿Cómo manejo esto adecuadamente? Intenté establecer mis valores en ngOnInit, pero eso hace que mis variables de escala no estén disponibles.

Estoy usando este artículo como referencia para las ideas de escalado.

HTML

 <div id="measure-width-vw" #vpWidth></div> <div id="measure-height-vh" #vpHeight></div> <div id="scaledElement" class="bg-image-wrapper" #scaledElement [style.transform]="'scale(' + targetScale.X + ', ' + targetScale.Y + ') translate(' + targetTranslate.X + 'px, ' + targetTranslate.Y + 'px)'"> ... content ... </div>

JAVASCRIPT

 export class NotificationsComponent { @ViewChild('vpWidth') vpWidthElement: ElementRef<HTMLElement>; @ViewChild('vpHeight') vpHeightElement: ElementRef<HTMLElement>; @ViewChild('scaledElement') scaledElement: ElementRef<HTMLElement>; @HostListener('window:resize', ['$event']) onResize(event) { this.setScalingValues(this.scaledElement.nativeElement.offsetWidth, this.scaledElement.nativeElement.offsetHeight, this.vpWidthElement.nativeElement.offsetWidth, this.vpHeightElement.nativeElement.offsetHeight); } vpWidth: number; vpHeight: number; scalable: { height: number, width: number } targetScale: { X: number, Y: number } targetTranslate: { X: number, Y: number } ... constructor() { this.scalable = { width: 0, height: 0 } this.targetScale = { X: 0, Y: 0 } this.targetTranslate = { X: 0, Y: 0 } } ngAfterViewInit(): void { window.dispatchEvent(new Event('resize')); } setScalingValues(scalableWidth, scalableHeight, vpWidth, vpHeight) { this.scalable.width = scalableWidth; this.scalable.height = scalableHeight; this.vpWidth = vpWidth; this.vpHeight = vpHeight; this.targetScale.X = this.vpWidth / this.scalable.width; this.targetScale.Y = this.vpHeight / this.scalable.height; this.targetScale.X = Math.min(this.targetScale.X, this.targetScale.Y); this.targetScale.Y = this.targetScale.X; this.targetTranslate.X = Math.round((this.vpWidth - (this.scalable.width * this.targetScale.X)) / 2); console.log(this.scalable.width); this.targetTranslate.Y = Math.round((this.vpHeight - (this.scalable.height * this.targetScale.Y)) / 2); } }