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 に答える