建立与不同尺寸

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> 

自然，您需要根据图像的细节和相对比例进行定位和尺寸调整。如果这是可行的，但它可以很好地扩展并且可以与任何动画一起使用。

祝你好运！