0

さまざまなサイズ/アスペクト比の画像を含む jCarousel Lite を Drupal で使用しています。画像を垂直方向と水平方向の中央に配置しようとしてもうまくいきません(つまり、等間隔)。プラグインでは、画像が<ul><li><img ... /></li></ul>. とりわけ display:inline-block、私は試しましたが、そのほとんどはカルーセルを台無しにするだけです。marginTop:50%

カルーセルは次の場所に投稿されています: http://carillontech.org/drupal/

ありがとう！！

4

2 に答える 2

2

これを行う 1 つの方法は、ページで既に jQuery を使用しているため、各画像の画像の高さを取得し、それをカルーセルの高さから差し引いて、その値の半分の上余白を画像または親の李。

このようなもの：

$('#carousel img').each(function() {
   marginTop = ($('#carousel').outerHeight(false) - $(this).outerHeight(false)) / 2;
   if(marginTop > 0) {
      $(this).css({'margin-top':marginTop});
   }
});

使用している実際の ID で #carousel を調整する必要がありますが、この方法で機能するはずです。

于 2010-04-19T14:52:24.890 に答える
0

ヒントをありがとう。これは一種の警官ですが、最も簡単な解決策は、画像キャンバスをすべて同じサイズになるように拡張することです。背景色が変更された場合は、画像の背景色を変更する必要があります（jpgは透明度を使用しないため）が、少なくともすべてのブラウザーで一貫して機能します（CSSとは異なります）。

于 2010-04-20T21:06:18.697 に答える