使用不同大小的图像构建响应式动画网格

【问题标题】：Build a responsive and animated grid with images of different sizes使用不同大小的图像构建响应式动画网格
【发布时间】：2013-03-06 20:46:13
【问题描述】：

我想要实现的是由许多图像组成的横幅，例如：http://imgur.com/I0NcWdy

图像的尺寸和纵横比不同，但它们出现在同一个布局网格上（因此 HTML/CSS“骨架”可以固定），每张图像出现在不同时间的动画效果（jqueryui 的反弹） .

横幅没有固定的尺寸，它会根据窗口的大小按比例缩放，以保持其纵横比。我已经设法获得按比例缩放的 DIV，所以这不是问题。

我正在努力弄清楚如何购买但没有成功，尝试了 Masonry，但我无法按照我的意愿制作动画或放置图像。有什么建议吗？

【问题讨论】：

标签： jquery html css gallery responsive-design

【解决方案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>

当然，您需要根据图像的细节和相对比例来调整定位和大小。如果这是可行的，尽管它可以很好地扩展并适用于您拥有的任何动画。

祝你好运！

【讨论】：