-2

私が達成しようとしているのは、次のような多くの画像で構成されるバナーです: http://imgur.com/I0NcWdy

画像のサイズと縦横比は異なりますが、同じレイアウト グリッドに表示されます (HTML/CSS の「スケルトン」を固定できるため)。すべての画像は、アニメーション効果 (jqueryui のバウンス) とともに異なるタイミングで表示されます。

バナーのサイズは固定されておらず、縦横比を維持しながらウィンドウのサイズに比例して拡大/縮小されます。比例スケーリング DIV を取得することができたので、それは問題ではありません。

どうすればうまくいかないのか、メイソンリーを試してみましたが、好きなように画像をアニメーション化したり配置したりできません。助言がありますか？

4

1 に答える 1

0

これはうまくいきますか？

カスタムクラスを適用して、各画像のサイズを変更し、場合によっては配置します。たとえば、次のような単純なもののいずれかです。

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>

当然のことながら、画像の詳細と相対的な比率に応じて、配置とサイズを変更する必要があります。これが実現可能である場合、それはうまくスケーリングされ、あなたが持っているアニメーションで動作します.

幸運を！

于 2013-03-06T12:22:46.147 に答える