Question

繼續關閉this question，我試圖在調整窗口大小的同時模擬同一個動畫。

到目前爲止，我已將「.img-responsive」類（在bootstrap.css中找到）添加到圖像中，但不幸的是，div的尺寸不會相應地進行調整。

我該怎麼辦？

HTML：

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

JS：

function animateit(){ 

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

} 

animateit(); 

CSS：

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

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

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

Answer 1

因此，這不是要做到這一點最乾淨的方式，但它是一個解決方案。您可以將元素包裝到設置爲position:relative（包含它們）和overflow:hidden（這樣多餘的藍色「水」將不可見）的容器中，然後在該包裝設置中添加一個重複圖像到opacity:0。所述第二圖像的目的是保持容器的高度和寬度塌陷看到其它兩個元件是如何位置absolute和不註冊width或height：

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> 

CSS

.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; 
} 

JS

function animateit(){ 

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

} 

animateit(); 

FIDDLE

的問題是引導有一個名爲.hidden類（我剛好名礦）將圖像設置爲display: none因此沒有登記的高度。我改變了我的類的名稱：

WORKING BOOTPLY