1

大きな正方形（幅と同じ高さ）を含むWebサイトがあります。

正方形の高さとして、常にブラウザウィンドウの高さの95％を使用したいと思います。しかし、私は実際に正方形の定義された高さ/幅を変更したくありません。zoomCSSプロパティを使用したいと思います。ブラウザウィンドウを小さいサイズに変更すると、正方形が完全に表示されるようにズームアウトする必要があります。

4

1 に答える 1

7

出発点は次のとおりです（FirefoxとOperaにクロスブラウザーサポートが追加されています）：JSFiddleデモ

HTML

<div class="square"></div>

CSS

html, body {
    margin: 0;
    height: 100%;
}
.square {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background-color: #7ad;
    -moz-transform-origin: center top;
      -o-transform-origin: center top;
}

jQuery

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

    var viewportHeight = $(window).height();
    var squareHeight = $square.height();
    var desiredHeight = Math.round(viewportHeight * 0.95);
    var zoom = (desiredHeight / squareHeight);

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

アップデート：

上記のコードは、ページ全体ではなく、正方形の要素をズームします。ページ全体をズームする必要がある場合（正方形の外側のページに他のコンテンツがある場合など）、この2番目のJSFiddleデモを試してください。

ページ全体をズームインすると、ズームインするとすべてのブラウザに水平スクロールバーが表示され、使い勝手が非常に悪くなることがわかりました。これを回避するには、小さなブラウザウィンドウでズームアウトしますが、大きなブラウザウィンドウではズームインしないでください。これは、2番目のデモの動作です（ブラウザーが非常に小さい場合にのみズームします）。

于 2013-03-15T17:56:40.720 に答える