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 に答える