0

私は現在、最大高さとオーバーフローを非表示に設定して、親内で画像を垂直方向に中央揃えにする素晴らしいスクリプトを使用するレスポンシブ Web サイトを構築しています。

http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/

ページ上にコンテナのインスタンスが 1 つしかない場合、スクリプトは完全に機能しますが、コンテナのインスタンスが 1 つ以上見つかった場合、垂直方向のセンタリングが台無しになります。スクリプトはページ上のすべての画像に同じマージンを適用しているようですが、これは私の場合は理想的ではありません:

  1. コンテナーのインスタンスごとに最大高さが異なります。
  2. 画像の高さが異なるため、独自の余白が必要です。

私が直面していた問題を克服するために、スクリプトを少し変更し、jQuery .each() 関数を使用してオブジェクトを反復処理し、関数を実行しました。結果は次の URL で確認できます。

http://www.lewismalpas.co.uk/rwd

これは意図したとおりに機能しているようで、各画像には独自の余白がありますが、解決できない問題がいくつかあります。助けていただければ幸いです。まず、修正できないコンソールに JS エラーが表示されます。

ReferenceError: centerImage is not defined

ページの読み込みや更新時に画像が垂直方向に中央に配置されていないため、Safari/Chrome でも予期しない結果が得られますが、URL フィールドでリターンを押すと画像が中央に配置されるように見えますが、これは理想的ではありません。

これらの問題/矛盾についての助けをいただければ幸いです。

ありがとう、

ルイス。

4

1 に答える 1

0

--------- 申し訳ありませんが私の回答を破棄し、質問全体を読むことができませんでした --------------

はい、あなたが正しい。コードをざっと見ただけです。

centerImage() 関数を次のように変更したい場合があります。

 function centerImage() {
   $container.each(function() { //iterate through every single container
      $this = $(this); // wrap the current container in jQuery so you can call some jQuery methods.
      $img = $this.find('img'); // finding the image inside current container.
      imageHeight = $img.height();
      wrapperHeight = $this.height();
      overlap = (wrapperHeight - innerHeight) / 2;
      $img.css('margin-top', overlap);
   });
 }

他のすべては問題ありません。

それが役に立てば幸い ：）

于 2012-09-09T21:37:28.757 に答える