0

我有一个根据视口大小动态缩放的 div。

function zoomSquare() {
    var $square = $('.square');

    var viewportWidth = $square.parent().width();
    var squareWidth = $square.width();
    var desiredWidth = Math.round(viewportWidth * 0.95);
    var zoom = (desiredWidth / squareWidth);

    $square.css('zoom', zoom);
    $square.css('-moz-transform', 'scale(' + zoom + ')');
    $square.css(  '-o-transform', 'scale(' + zoom + ')');
}

// When the browser is resized
$(window).on('resize', function(){ zoomSquare(); });

// When the page first loads
$(document).ready(function(){
    zoomSquare();
});

http://jsfiddle.net/sarahwhatsup/YDwds/8/

我想让父级设置为自动，因为 div 缩放，下面的 div 调整它们的位置。这适用于 Chrome、IE、Safari，但由于某种原因，我无法让它在 Firefox 中运行。有人知道吗？

4

1 回答 1

1

您可以更改包装器 div 的高度。

$('.wrapper').css('height', squareWidth * zoom);

http://jsfiddle.net/YDwds/22/

于 2013-04-02T05:49:56.540 回答