1

我有一个包含一个大正方形的网站（与宽度相同的高度）。

我希望正方形始终将浏览器窗口高度的 95% 作为其高度。但我不想真正改变正方形的定义高度/宽度。我想使用 CSSzoom属性。如果我将浏览器窗口更改为小尺寸，它应该缩小以使正方形仍然完全可见。

4

1 回答 1

7

这是一个起点（为 Firefox 和 Opera 添加了跨浏览器支持）：JSFiddle Demo

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

更新：

上面的代码放大了方形元素，而不是整个页面。如果需要缩放整个页面（如果页面上正方形之外还有其他内容可能会出现这种情况），请尝试第二个 JSFiddle Demo。

缩放整个页面时，发现放大会导致所有浏览器都出现水平滚动条，这对可用性非常不利。为避免这种情况，请缩小小浏览器窗口，但不要放大大窗口。这就是第二个 Demo的行为方式（它只会在浏览器非常小的时候进行缩放）。

于 2013-03-15T17:56:40.720 回答