Scaling elements proportionally using CSS and JQUERY

Question

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

Kinglish · Accepted Answer · 2022-05-09 16:39:45Z

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>

Collectives™ on Stack Overflow

Scaling elements proportionally using CSS and JQUERY

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related