Jquery 我可以创建一个高度为窗口百分比并保持恒定比例的div吗？

我想做一个固定比例的网站，规模的窗口大小。我意识到我会在页面两侧获得不同的边距，我将无法扩展页面以适应内容；这些约束是可以的

我想在一个div的高度是90%的窗口高度，宽度是150%的窗口高度的网站。因此，div可以缩放，但保持其比例。这似乎是jQuery的工作。

CSS:

html, body {
    height: 100%;
}
#wrapper {
    height: 90%;
    margin: auto;
}

var $window = $(window),
    $wrapper = $('#wrapper');

$window.resize(function(){
    $wrapper.css({
        width: $window.height() * 1.5,
        marginTop: $window.height() * .05
    });
}).resize();

JavaScript:

html, body {
    height: 100%;
}
#wrapper {
    height: 90%;
    margin: auto;
}

var $window = $(window),
    $wrapper = $('#wrapper');

$window.resize(function(){
    $wrapper.css({
        width: $window.height() * 1.5,
        marginTop: $window.height() * .05
    });
}).resize();

（调整右下窗格的大小以查看其实际操作）

---

注意：按原样，包装器div实际上可能比视口宽。

---

如果这不是您想要的，则必须添加逻辑以防止出现这种情况。

这非常接近，因为

marginTop

属性设置不正确：

$(function () {
    var percent = 50,
        ratio   = 1.6;
    $(window).bind('resize', function () {
        var $this  = $(this),
            width  = $this.width(),
            height = Math.floor(width / ratio);

        $('#window-id').css({
            width      : Math.floor(width * (percent / 100)),
            height     : Math.floor(height * (percent / 100)),
            marginLeft : Math.floor((1 - (percent / 100)) / 2 * $this.width()),
            marginTop  : Math.abs((height - $this.height()) / 2)
        });
    }).trigger('resize');
});

这将绑定到

窗口

对象的

调整大小

事件，每当触发

调整大小

事件时，

#窗口id

元素将被重新调整大小和位置

---

这里有一个演示：

这不是“jquery的地方”。这是一个快速的编程问答。。而且正是我需要的剧本！我确实需要去掉滚动条，我假设可以通过向div添加一个等于上边距的负边距来实现。我尝试了

marginBottom:-（$window.height（）*.05）

但没有成功。使用以下CSS使滚动条消失：

body{height:100%}html{height:95%}

对Joseph的javascript没有任何更改。