Jquery 做一个；“动态”；分区响应

继续，我尝试在调整窗口大小的同时模拟相同的动画

到目前为止，我已经在图像中添加了“.img responsive”类（在bootstrap.css中找到），但不幸的是，div的尺寸没有相应地调整

我该怎么办

HTML:

CSS:

---

所以这不是最干净的方法，但它是一个解决方案。您可以将容器中的元素包装为设置为

位置：相对

（以容纳它们）和

溢出：隐藏

（这样多余的蓝色“水”将不可见），然后在包装器内添加一个重复图像，设置为

不透明度：0

。第二幅图像的目的是防止容器的高度和宽度折叠，查看其他两个元素的位置

绝对值
，并且不注册
宽度
或
高度
：

HTML

<div class="wrapper">
  <img class="hidden" src='http://www.videsignz.com/testing/images/water-front2.png' />
  <img class="glass img-responsive" src='http://www.videsignz.com/testing/images/water-front2.png' />
  <div class="water"></div>
</div>

JS

.wrapper{
  position: relative;
  height:auto;
  width: 100%;
  max-width: 350px;
  overflow:hidden;
}

.img-responsive {
  display: block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}

.glass {
  position:absolute; 
  left:0px; 
  top:0px; 
  z-index:5;
}

.hidden{
  display: block;
  opacity: 0;
  width: 100%;
}

.water {
  position:absolute; 
  left:0px; 
  right: 0;
  top:350px; 
  background-color:#67d9ff; 
  height:0px; 
  display:block; 
}

function animateit(){

  $('.wrapper .water').animate({'height' : '350px', 'top' : 0 }, 2000, function() {
    $('.wrapper .water').animate({'height' : 0, 'top' : '350px' }, 2000, animateit);
  });

}

animateit();


问题是bootstrap有一个名为
.hidden
（我恰好给我的命名）的类，它将图像设置为
display:none
，因此没有记录高度。我更改了班级的名称：

什么是css的
。img responsive
？我的错，忘了提到我使用的是Bootstrap。谢谢，但由于某种原因，我无法使用它。（除非我显示溢出并挫败其目的。）@reacham我会看一看谢谢。现在，这只是一个适应我已经拥有的东西的问题。很好。事后想一想，有没有办法把这个放在中心？因为我真的有麻烦了。
<div class="wrapper">
  <img class="hidden" src='http://www.videsignz.com/testing/images/water-front2.png' />
  <img class="glass img-responsive" src='http://www.videsignz.com/testing/images/water-front2.png' />
  <div class="water"></div>
</div>

.wrapper{
  position: relative;
  height:auto;
  width: 100%;
  max-width: 350px;
  overflow:hidden;
}

.img-responsive {
  display: block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}

.glass {
  position:absolute; 
  left:0px; 
  top:0px; 
  z-index:5;
}

.hidden{
  display: block;
  opacity: 0;
  width: 100%;
}

.water {
  position:absolute; 
  left:0px; 
  right: 0;
  top:350px; 
  background-color:#67d9ff; 
  height:0px; 
  display:block; 
}

function animateit(){

  $('.wrapper .water').animate({'height' : '350px', 'top' : 0 }, 2000, function() {
    $('.wrapper .water').animate({'height' : 0, 'top' : '350px' }, 2000, animateit);
  });

}

animateit();