使用 CSS 和 JQUERY 按比例缩放元素

Question

我有一个 div (#container)，其中包含另一个 div (#main)固定宽度为 400px，高度为 450px。

#main 包含两个网格：一个 6x1 网格和一个 7x6 网格。

我的目标是 #main 按比例缩放大小，如果 #container 的高度小于 450px，那么#main 内的网格保持比例精确。

我已使用 jquery 缩放 #main 准备好文档并 window 调整大小。这在使用桌面和缩放屏幕时非常有效。

然而，当我在 Chrome Inspector 上测试不同设备时，#main 似乎固定在 400w + 450h。控制台记录的宽度和高度小于此值。我不知道修复是什么。

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();
});

非常感谢

Answer 1

我可以从您的代码中看出两个问题。您正在运行ning console.log 函数中未更改的值。您设置变量，运行一些 css 转换，然后 console.log 相同的变量，所以不确定您在那里期待什么。

第二件事是，当您使用 transform 时，高度和宽度值不会改变。从下面的示例中可以看出，这些数字保持不变。这实际上是 transform 的美妙之处 - 无需重绘页面即可影响某些 HTML 元素。

$('.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>

除非您有令人信服的理由使用变换，否则请考虑仅使用该缩放值来影响 width/height。这将允许周围的其他相邻 html 元素流动和调整。

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>

使用 CSS 和 JQUERY 按比例缩放元素

Scaling elements proportionally using CSS and JQUERY

javascript

css

jquery

transform

scale