反応的なレイアウトでdivを一様に縮小するにはどうすればよいですか？

Question

http://www.designobvio.us/GoldGrid2/

heresサンプルページ。画面の中央にコンテンツボックスが表示されます。ブラウザウィンドウのサイズを変更すると、コンテンツボックスが水平方向に「右のみ！」から表示されます。

1. 私のコンテンツボックスを一律に左右に拡大縮小するにはどうすればよいですか？

2. ブラウザウィンドウが垂直方向に拡大すると、ボックスを垂直に拡大するにはどうすればよいですか？

は、Googleのクロムを使用する場合は空白の新しいタブが、私はどこhttp://vvcap.net/db/4cqAV8lk02EkhsSerduF.htp

マイコードスーパークリーンを探している効果を持っています。 HTML：

<div id="container"> 
    <div class="inner-box"> 
     <!-- start of padder"--> 
     <ul id='carousel_ul'> 
      <li class="padder"> 
       <article class="web"> 
       <h2>01.03.12</h2> 
        <section> 
        <h1>Skollklubben.se</h1> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis elementum tellus, eget ullamcorper magna tristique ac. <a href=""><span>details</span></a> </p> 
        </section> 
       </article> 
      </li> 
     </ul> 
    </div> 
</div> 

ソースからCSSを参照してください。 （その投稿が多すぎる） 回答を得るために他に何か提供できるものはありますか？私は仕事/研究をしたいと思っています。どこから始めたらいいのかわかりません。ここで

Answer 1

が、これは、これは同じアスペクト比を除いて（あなたの例のように）それをリサイズされたコンテンツをスケーリングされていない、jQueryのを使用した例です。

// The margin between the objects and the viewport when resized. 
var objectMargin = 50; 
// The minimum size our objects will shrink to (percentage). 
var minSize = 50; 
// Define our objects and get their dimensions and position on the page. 
var objects = $('article.web'); 
var objectOffset = objects.filter(':first').offset(); 
var objectSize = { 
    height: objects.filter(':first').height(), 
    width: objects.filter(':first').width() 
}; 
objectSize.ratio = objectSize.width/objectSize.height; 


// This is our function which resizes the content 
var scale = function() { 
    var windowHeight = $(window).height(); 
    var objectHeight = objects.filter(':first').height(); 
    // Calculate objects new height 
    var newHeight = windowHeight - objectOffset.top - objectMargin; 
    // Check whether object needs to shrink or grow. 
    if (newHeight < objectHeight) { 
     // Change objects dimensons if it isn't below minimum height 
     var minHeight = (minSize/100) * objectSize.height 
     if (newHeight < minHeight) { 
     objects.each(function(){ 
      $(this).height(minHeight); 
      $(this).width(minHeight * objectSize.ratio); 
     }); 
     } else { 
     objects.each(function(){ 
      $(this).height(newHeight); 
      $(this).width(newHeight * objectSize.ratio); 
     }); 
     } 
    } else { 
     // Change objects dimensions if it isn't above maximum height 
     if (newHeight > objectSize.height) { 
     objects.each(function(){ 
      $(this).height(objectSize.height); 
      $(this).width(objectSize.width); 
     }); 
     } else { 
     objects.each(function(){ 
      $(this).height(newHeight); 
      $(this).width(newHeight * objectSize.ratio); 
     }); 
     } 
    } 
} 

// Bind the scale function to the browser resize event 
$(window).resize(function() { 
    scale(); 
}); 

// Call the scale function to make sure the screen isn't small already. 
scale(); 

これは何が起こるかを考慮していませんユーザーが水平方向に最初にサイズを変更した場合は、ここからどこに行くのかを知っておく必要があります。