2

さまざまなサイズの画像のスライドショーを作成して、キャンバス領域内の垂直方向および水平方向の中央に表示します。

私の CSS では、各画像が比例してキャンバスを埋めるように、画像の幅と高さを 100% に設定しました。画像の元のサイズが非常に大きい (高さ 800 ピクセルまで) ため、ビューアの画面サイズに収まるようにキャンバスのサイズを自動調整する必要があります。

私はjQuery 1.4を使用しており、画像の高さを使用して、キャンバスの中央に絶対配置するためのトップ値を計算しています。

jQuery を使用して .height()、innerHeight()、outerHeight() を取得しようとしましたが、常にイメージのフル サイズを取得します。

jQuery オブジェクトから DOM 要素を抽出し、.width、.offsetWidth、および .clientWidth を使用してみましたが、これも常に画像のフル サイズを返すようです。

Firebug は正しい寸法を表示するので、画像の実際の表示高さを計算する方法があることはわかっていますが、それが何であるかはわかりません。max-height = 100% に設定した場合、画像の実際の表示高さを取得するにはどうすればよいですか?

js で各画像の高さを計算して設定する必要はありませんでしたが、必要な場合はそうします。キャンバスのサイズを設定して、画像を自動調整できるようにする必要があるようです。

4

1 に答える 1

2

画像を自動に戻し、画像の値を取得してから、それらを 100% に戻すことをお勧めします。

$('img').each(function(){
   var self = $(this);
   self.hide() // Hide them, fading, you choose
      .css({'width':'auto', 'height':'auto'}) // set them to auto.
      .data('width', self.width())  // Now you can get the real size
      .data('height', self.height()) // And store it as jQuery data in the image.
      .css({'width':'100%', 'height':'100%'}) // Back to 100%
      .show();  // Show them.
});

または、他の方法

$('img').hide().css({'width':'auto', 'height':'auto'})
   .each(function(){
      var self = $(this);
      self.data('width', self.width())
          .data('height', self.height());
   })
   .css({'width':'100%', 'height':'100%'}).show();

または、おそらく変更が速すぎるため、それらを非表示にする必要はありませんが、最初の読み込み中にユーザーがまばたきを見ないように、ロジックを調整する必要がある場合があります。

いずれにせよ、あなたの毒を選んでください。

于 2010-02-18T01:54:40.417 に答える