Scaling elements proportionally using CSS and JQUERY-CodePudding

I have a div (#container) that contains another div (#main) that has a fixed width of 400px and height of 450px.

#main contains two grids: a 6x1 grid and a 7x6 grid.

My goal is to have #main proportionally scale in size, should #container be less than 450px in height, so that the grids within #main remain proportionally exact.

I have used jquery to scale #main on document ready and window resize. This works perfectly when using desktop and scaling the screen.

However, when I test on different devices on Chrome Inspector, #main appears fixed at 400w 450h. The console logs width & height as less than this. I can’t figure out what the fix is.

function scaleMain() {

  let containerHeight = $('#container').height();
  let containerWidth = $('#container').width();

  if (containerHeight < 450) {

    let scaleValue = (containerHeight / 450. * 100)
    $('#main').css("transform", "scale(0."   scaleValue   ")");



  } else if (containerHeight < 400) {

    let scaleValue = (containerHeight / 400. * 100)
    $('#main').css("transform", "scale(0."   scaleValue   ")");


  } else {

    $('#main').css("transform", "none");

  }

  console.log('Container Height: '   containerHeight   'px')
  console.log('Container Width: '   containerWidth   'px')
}

$(document).ready(function() {
  scaleMain();
});


$(window).resize(function() {
  scaleMain();
});

Many thanks

CodePudding user response：

Two issues that I can see from your code. You are running console.log on values that are not changed in the function. You set the variable, run some css transforms and then console.log the same variable, so not sure what you're expecting there.

The second thing is that when you use transform, the height and width values dont change. As you can see from the example below, those numbers stay static. That is actually the beauty of transform - to affect certain HTML elements without having to redraw the page.

$('.box').css('transform','scale(.6)');
console.log($('.box').width())

.box{
width:100px;
height:100px;
background:#000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='box'></div>

Unless you have a compelling reason to use transform, consider just using that scale value to affect the width/height. That will allow other adjacent html elements around to flow and adjust.

let scale = .6;
let w = $('.box').width() * scale;
let h = $('.box').height() * scale;
$('.box').css({'height' : h, 'width' : w})
console.log($('.box').width())

.box{
width:100px;
height:100px;
background:#000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='box'></div>