How to correctly transform div content to look exactly same size in all different resolution?

While developing a dashboard, I have come across an issue where I need to show the exact same size content of the widget in height and width throughout all screen resolution, for example:

if I have developed in 1536 * 722 and I am opening dashboard in 1366 * 728, it should so the same size by scaling the content or if I am opening at bigger resolution screen then also it should show the exact same size

currently, I am using the below formula and calculating the scale and applying it to div but it is not accurate it seems I am missing something as some time height or width of scale is not perfect it goes outside my container.

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); = currentWidth + 'px'; = 'scale(' + scale + ')'; = '0 0'; = 'border-box'; = 'block';

While developed in 1536 * 722 screen resolution

enter image description here

When viewed at 1920 * 902, Table height goes outside container


Bharti Airtel Prepaid Plans With OTT Benefits Under Rs 1000

Cegep Project – Peer-to-peer student assistance web application