¿Cómo transformar correctamente el contenido div para mantener la misma relación de aspecto de tamaño en todas las resoluciones diferentes?

Mientras desarrollaba un tablero, me encontré con un problema en el que necesito mostrar exactamente el mismo tamaño de contenido del widget en altura y ancho en toda la resolución de pantalla, por ejemplo:

si he desarrollado en 1536 * 722 y abro el tablero en 1366 * 728, debería tener el mismo tamaño al escalar el contenido o si abro una pantalla de mayor resolución, también debería mostrar exactamente el mismo tamaño

Actualmente, estoy usando la fórmula a continuación, calculo la escala y la aplico a div, pero no es precisa, parece que me falta algo, ya que en algún momento la altura o el ancho de la escala no es perfecto, sale de mi contenedor.

const currentWidth: number = this.widget.widgetSizing.bodyWidth; // saving width while created on particular screen resolution
const currentHeight: number = this.widget.widgetSizing.bodyHeight; // saving height while created on particular screen resolution
const availableWidth: number = this.el.nativeElement.offsetWidth;
const availableHeight: number = this.el.nativeElement.offsetHeight;

const scale = Math.min(availableWidth / currentWidth, availableHeight / currentHeight);



this.el.nativeElement.style.width = currentWidth + 'px';
 this.el.nativeElement.style.transform = 'scale(' + scale + ')';
 this.el.nativeElement.style.transformOrigin = '0 0';
 this.el.nativeElement.style.boxSizing = 'border-box';
 this.el.nativeElement.style.display = 'block';

ingrese la descripción de la imagen aquí

Si bien desarrollado en resolución de pantalla 1536 * 722

ingrese la descripción de la imagen aquí

Cuando se ve a 1920 * 902, la altura de la mesa sale del contenedor

Answer