Question

我正在使用jQuery根据父容器的尺寸动态缩放和缩放div。但是，我很难检测到身高。我将父级设置为auto，但是当div重新缩放时，它不会检测到高度的变化。

$(window).load(function () {
    console.log( "window load" );
    function zoomSquare() {
        var $square = $('.square');

        var vh = $square.parent().width(); // Get the height of whatever the parent of square is
        var squareHeight = $square.width(); // Grab the height of .square
        var desiredHeight = Math.round(vh * 0.95);
        var zoom = (desiredHeight / squareHeight);

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

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

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

});

我在这里有一个小提琴http://jsfiddle.net/sarahwhatsup/33cg5/3/

您可以看到我的背景包装器保持相同的高度，并且不会扩展以适应缩放div。我如何修复它，以便包装器始终适合缩放的div内部？

Answer 1

我有一个similar question，我猜解决方案也适用于此： http://jsfiddle.net/VTAH4/1/
此解决方案使用插件来检测重新调整大小：Ben Alaman's resize plugin。

$(window).load(function () {

    $.fn.animateHeight = function (container) {
         var thisHeight = $(container).map(function (i, e) {
        return $(e).height();
         }).get();

         return this.animate({
        height: thisHeight
         });
    };

    // When the browser is resized
    $(window).resize(function () {
        $(".square").animateHeight(".wrapper")
    });

    // When the page first loads
    $(document).ready(function () {     
        $(".square").animateHeight(".wrapper")
    });

});

如何使父容器调整其高度以匹配缩放的div

1 个答案: