在響應式佈局中，如何讓div可以均勻縮小？

Question

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

繼承人樣本頁面。屏幕中間會出現內容框。當您調整瀏覽器窗口大小時，您可以看到內容框從「僅限正確！」水平縮放。

1. 如何讓我的內容框從左右均勻縮放？

2. 當瀏覽器窗口垂直縮放時，如何使框垂直縮放？

如果你使用谷歌Chrome瀏覽器新的空白標籤有我要找的地方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(); 

這並沒有考慮到會發生什麼如果用戶先調整水平大小，但它應該爲您提供一個從這裏開始的好主意。