高さがウィンドウのパーセンテージで、一定の比率を維持するdivを作成できますか？

Question

ウィンドウサイズに合わせて固定比率のウェブサイトを作りたいと思っています。私は両側にさまざまなマージンを取ることを実感します。私はコンテンツに合わせてページを拡大することはできません。これらの制約はOKです。

高さがウィンドウの高さの90％で、幅がウィンドウの高さの150％のdivにサイトを作りたいとします。したがって、divは縮尺は変わりませんが、比率は維持されます。これはjQueryの仕事のようです。

Answer 1

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が実際にビューポートより広いかもしれません。
それがあなたが望むものでないなら、それを防ぐロジックを追加する必要があります。

Answer 2

これは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'); 
}); 

これは、windowオブジェクトに対してresizeイベントに結合するresizeイベントが発生するたびに、#window-id要素になりますサイズを変更して再配置します。

ここはデモです：http://jsfiddle.net/WwVxY/1/