Jquery 将图像适配到液体父对象中

我尝试在液体布局（父级）中显示图像滑块，我不喜欢限制图像的高度和宽度，因为大屏幕显示器（27“）可以将图像请求为11”或更小的小屏幕。 你能告诉我是否有插件可以帮助我解决这个问题吗？ 现在我正在使用一个滑块（plugin-Nivo），它有一个固定的布局，我无法将其更改为liquid 以下是我的代码： HTML

---

你认为我对不同的屏幕大小使用不同的布局是一个好主意吗？有没有办法用Jquery解决这个问题？

我不知道预封装的插件，但处理这个问题的代码并不多

您可以附加事件处理程序来调整窗口大小，检查容器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);
    })
})();

---

这里有一个演示：

谢谢friend00您能告诉我在哪里可以找到此产品的样品吗？@user1106951-什么是“样品”？我提供了用于检测调整大小的示例代码。将幻灯片重置为新大小取决于您。在我的答案中添加了演示链接。感谢演示，但它仍然无法在滑块上工作！你能看看下面的链接，让我知道我做错了什么吗@用户1106951-您必须制作自己的

setImageSize（）

版本，该版本适用于您正在使用的所有图像。您现在所拥有的内容不是为了与幻灯片一起使用而编写的。如果您想寻求有关如何动态更改

jQuery Nivo Slider v2.1

插件的大小以及更改所有现有图像大小的帮助，那么您可能应该开始一个新问题，询问更具体的问题。这个答案为你提供了一个框架，让你知道事情什么时候改变了大小，但是如何改变幻灯片的大小是另一个问题。

 * {
    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%;
  }

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