How can I make the dimensions of a scaled element permanent?

I'm trying to make the dimensions of a scaled element and all its children permanent.

When I do what is below the element's dimensions change dramatically, not the same as the scaled element.

How can I fix this?

function scaleElement(elScale, elCntnr, b4RptBldrBlk) {
   var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0, elCtrl, rctCntnr = null, cntnrWidth, sttWidth, sttHeight;
 
   if (typeof elScale == 'string' || elScale instanceof String) elScale = document.getElementById(elScale);
   if (typeof elCntnr == 'string' || elCntnr instanceof String) elCntnr = document.getElementById(elCntnr);
   if(!elScale) return false;   
   if(elCntnr == undefined) elCntnr = null;
   if(b4RptBldrBlk == undefined) b4RptBldrBlk = false;
   
   if(elCntnr) {
     rctCntnr = elCntnr.getBoundingClientRect();
     cntnrWidth = rctCntnr.width;
   }
     
   elScale.ontouchstart = scaleMouseDown;
   elScale.onmousedown = scaleMouseDown;   

   function scaleMouseDown(e) {
     var x, y, rct = elScale.getBoundingClientRect();
     
     elScale.style.transformOrigin = "left top";
     
     e = e || window.event;
     e.preventDefault();
     e.stopImmediatePropagation();
     e.stopPropagation();
     
     if(e.type == "touchstart") {
       x = e.touches[0].clientX;
       y = e.touches[0].clientY;
     }
     else {
       x = e.clientX;
       y = e.clientY;
     }
     
     pos3 = x;
     pos4 = y;
     sttWidth  = rct.width;
     sttHeight = rct.height;
         
     document.ontouchend = closeScaleElement;
     document.onmouseup = closeScaleElement;   
     document.touchmove = elementScale;
     document.onmousemove = elementScale;
   }

   function elementScale(e) {
     var wdt, hgt, x, y, lft = null, rct, rctScale = elScale.getBoundingClientRect();
     var arScl, arChlds, child, scl1, scl2;
     
     e = e || window.event;
     e.preventDefault();
     e.stopImmediatePropagation();
     e.stopPropagation();
     
     if(e.type == "touchmove") {
       x = e.touches[0].clientX;
       y = e.touches[0].clientY;
     }
     else {
       x = e.clientX;
       y = e.clientY;
     }
         
     pos1 = x - pos3;
     pos2 = y - pos4;
     
     wdt = sttWidth + pos1;
     hgt = sttHeight + pos2;
     
     if(wdt < 20) wdt = 20;
     if(hgt < 20) hgt = 20;
     
     if(elCntnr) {
       if(wdt >= cntnrWidth) {
         lft = 0;
         wdt = cntnrWidth;
       }
       else if(rctScale.left + wdt >= cntnrWidth) {
         lft = cntnrWidth - wdt;
       }
       if(is_numeric(lft)) elScale.style.left = lft + "px";
     }   
     scl1 = wdt/sttWidth;
     scl2 = hgt/sttHeight;
     
     elScale.style.scale = scl1 + " " + scl2;
     
     /* with this remmed it works fine but temporary
     
     rctScale = elScale.getBoundingClientRect();
     arScl = [rctScale.width, rctScale.height];
     
     arChlds = Array.from(elScale.children);
     arChldScl = [];     
     for(let i=0; i < arChlds.length; i++) {
       child = arChlds[i];
       rct = child.getBoundingClientRect();
       arChldScl[i] = [rct.width, rct.height];       
     }
     
     elScale.style.scale = "";   
     elScale.style.width = arScl[0] + "px";
     elScale.style.height = arScl[1] + "px";
     //now the size changes much more than the scaled version - WHY?
     
     for(let i=0; i < arChlds.length; i++) {
       child = arChlds[i];
       child.style.width = arChldScl[i][0] + "px";
       child.style.height = arChldScl[i][1] + "px";       
     }
     */
   }

   function closeScaleElement() {
     document.ontouchmove = null;
     document.onmousemove = null;
     document.ontouchend = null;
     document.onmouseup = null;
     if(b4RptBldrBlk) {
       elScale.ontouchstart = null;
       elScale.onmousedown = null;
     }
   }
}

Code (markup):

 

I think my problem involved a timing issue.
I moved the conversion from scale to styles into the closing function.
Now I'm having trouble figuring out how to change fonts to match the scaled fonts.

 

he issue you are facing is because setting the scale of an element affects the dimensions of its children as well. When you reset the scale and manually set the width and height of the element and its children, you need to take into account the scaling factor.

To fix this issue, you can calculate the scaled width and height of the children based on the scaling factor you used for the parent element. Here is how you can modify your code:

// Calculate the scaled width and height of an element based on the scaling factor
function getScaledDimensions(originalWidth, originalHeight, scale) {
return {
width: originalWidth * scale,
height: originalHeight * scale
};
}

function elementScale(e) {
// Other code remain the same

elScale.style.scale = scl1 + " " + scl2;

// Reset the scale and set the width and height of the element and its children
elScale.style.scale = "";
elScale.style.width = arScl[0] + "px";
elScale.style.height = arScl[1] + "px";

for (let i = 0; i < arChlds.length; i++) {
child = arChlds[i];
// Get the scaled dimensions for the child element
let scaledDimensions = getScaledDimensions(arChldScl[i][0], arChldScl[i][1], scl1);
child.style.width = scaledDimensions.width + "px";
child.style.height = scaledDimensions.height + "px";
}
}

Code (CSS):

By calculating the scaled dimensions of the children based on the scaling factor used for the parent element, you can ensure that the dimensions of all elements remain consistent after resetting the scale.

 

GreenHost: thanks. I did figure this out and pretty much did just what you suggested.
I also figured out how to set the fonts by getting the pixels from getComputedStyle and then multiplying it by the Scale.