我可以創建一個高度爲窗口百分比並保持恆定比例的div嗎？

-1

我想製作一個可縮放到窗口大小的固定比例的網站。我意識到雙方會有不同的利潤空間，我無法擴展頁面以適應內容;這些限制是可以的。我可以創建一個高度爲窗口百分比並保持恆定比例的div嗎？

我想使網站的高度是窗口高度的90％，寬度是窗口高度的150％。所以，div的比例保持不變。這似乎是jQuery的工作。

2012-01-18 photocurio

這不是「jQuery的一個地方。」這是一個編程問答。 – 2012-01-18 19:18:00

CSS：

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

的JavaScript：

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

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

Here's the fiddle（調整底部右側窗格中看到它在行動）。

注：原樣，包裝DIV實際上可能比視口更寬。
如果這不是你想要的，你必須添加邏輯來防止這種情況。

來源

2012-01-18 19:14:13

那很快..和我需要的劇本！ – photocurio 2012-01-18 20:28:10

我確實需要擺脫滾動條，我認爲可以通過向div添加負邊距來達到頂部邊距。我試過 'marginBottom： - （$ window.height（）* .05）' 但這並沒有。 – photocurio 2012-01-18 21:13:25

滾動條消失，出現以下CSS：'body {height：100％} html {height：95％}'沒有改變Joseph的javascript。 – photocurio 2012-01-18 22:03:55

這是相當接近，在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'); 
});

這結合了resize事件爲window對象，每當resize事件被觸發時，#window-id元素會重新調整大小和重新定位。

這裏是一個演示：http://jsfiddle.net/WwVxY/1/

來源

2012-01-18 19:18:02 Jasper

我可以創建一個高度爲窗口百分比並保持恆定比例的div嗎？

回答

相關問題