Question

我试图以液体布局（父母）呈现一个图像滑块，我不喜欢限制高度和图像，而大屏幕监视器（27“）可以请求它们像11 “甚至更少。如果有插件可以帮助我解决这个问题，你能告诉我吗？现在我正在使用一个具有固定布局的滑块（插件 - Nivo），我无法将其更改为液体这是我的代码： HTML

 <!DOCTYPE HTML>
 <html>
 <head>
 <title>GALLERY</title>
 </head>
 <body>
 <div id="row_1">
 <div class="container"></div>
 </div>
 <div id="row_2">
 <div class="container">
 <div id="slideshow"> 
 <div id="slider"> 
 <img  src="img/1.jpg" title="" style="" /></div>      
 <img  src="img/2.jpg" title="" style="" /></div> 
 <img  src="img/3.jpg" title="" style="" /></div> 
 <img  src="img/4.jpg" title="" style="" /></div>      
 </div> 
 </div>  
 </div>
 </div>
 <div id="row_3">
 <div class="container"></div>
 </div>
 </body>
 </html>

CSS

 * {
    margin: 0;
    padding: 0;
    }
 html{
    height:100%;
    width: 100%;
   }
 body {
  background-color: #272321;
  height:100%;
  width: 100%; 
  }
 #row_1 {
  position:relative;
  height:15%;
  width: 100%;
 }
 #row_2{
   position:relative;
   height:77%;
   width: 100%;
  }
  #row_3{
   position:relative;
   height:8%;
   width: 100%;
   background-color: #151110; 
   }
  .container{
   position:relative;
   margin: 0 auto;
   height:100%;
   width: 80%;
  }

您是否认为我使用多种布局来处理不同的屏幕大小是一个好主意？有没有办法用Jquery解决这个问题？

Answer 1

我不知道预先插入的插件，但是处理这个插件并不是你自己的代码。

您可以将事件处理程序附加到窗口大小调整，检查容器div的大小，并使用您自己的javascript根据新的容器大小为幻灯片显示选择新的图像大小。

稍微延迟以防止代码在调整大小期间运行数百次，它可能如下所示：

(function() {
    var pauseTimer;

    $(window).resize(function() {
        // clear any previous timer running
        if (pauseTimer) {
            clearTimeout(pauseTimer);
        }
        // set new timer
        pauseTimer = setTimeout(function() {
            // user finished or paused resizing, 
            // so now we can recalculate slideshow size
            pauseTimer = null;
            // examine the size of your container div
            // select a new size image for your slideshow and load those images here
        }, 500);
    })
})();

以下是演示：http://jsfiddle.net/jfriend00/Tucf2/

适合图像的液体父母

1 个答案: