0

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

这是一个示例页面。屏幕中间会有内容框。当调整浏览器窗口的大小时，您可以看到内容框从“仅右侧！”水平缩放。

  1. 如何让我的内容框从左右均匀缩放？

  2. 当浏览器窗口垂直缩放时，如何使框垂直缩放？

如果您使用谷歌浏览器，一个空白的新标签具有我正在寻找的效果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。（发布太多了）我还能提供什么来帮助获得答案吗？我愿意做我只是不知道从哪里开始的工作/研究。

4

1 回答 1

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();

这并没有考虑到如果用户首先水平调整大小会发生什么，但是它应该为您提供从这里到哪里的好主意。

于 2012-04-07T10:05:06.917 回答