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>

然而，根据图像的细节和相对比例，您需要使用定位和尺寸。如果这是可行的，虽然它可以很好地扩展并适用于你拥有的任何动画。

祝你好运！

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

1 个答案: