建立與不同尺寸

Question

的圖像的響應和動畫電網

我試圖實現是許多圖像組成的旗幟，就像這樣：http://imgur.com/I0NcWdy

圖像的尺寸和縱橫比是不同的，但他們出現在同一個佈局網格上（所以HTML/CSS「骨架」可以固定），每個圖像都會在不同的時間出現在動畫效果（jqueryui的反彈）上。

橫幅沒有固定的尺寸，它根據窗口尺寸的比例進行比例縮放以保持縱橫比。我已經設法獲得按比例縮放DIV，所以這不是問題。

我努力想要如何去做它買沒有成功，試過砌體，但我不能動畫或放置像我想要的圖像。有什麼建議麼？

Answer 1

這會幫你嗎？

應用自定義類大小和可能的定位每個圖像，例如，無論是什麼簡單：

CSS

.image1{ 
width:10%; 
height:auto; 
} 

.image2{ 
width:20%; 
height:auto; 
} 

或可能：

.image1{ 
position:relative; 
top:0; 
left:0; 
width:10%; 
height:auto; 
} 

.image2{ 
position:relative; 
top:0; 
left:10%; 
width:20%; 
height:auto; 
} 

.image3{ 
position:relative; 
top:0; 
left:30%; 
width:15%; 
height:auto; 
} 

HTML

<div class="header"> 
<img class="image1" ....> 
<img class="image2" ....> 
.... 
</div> 

自然，您需要根據圖像的細節和相對比例進行定位和尺寸調整。如果這是可行的，但它可以很好地擴展並且可以與任何動畫一起使用。

祝你好運！