Question

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

这是一个示例页面。屏幕中间会有内容框。当一个人调整浏览器窗口的大小时，您可以看到内容框水平地从＆＃34;右边缩放！＆＃34;。

如何让我的内容框从左右均匀缩放？
当浏览器窗口垂直缩放时，如何使框垂直缩放？

如果你使用谷歌浏览器，一个空白的新标签有效，我正在寻找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();

这没有考虑如果用户首先水平调整大小会发生什么，但它应该让您很好地了解从何处开始。

在响应式布局中，如何让div均匀缩小？

1 个答案: