私は現在、レスポンシブWebサイトを構築しています。このWebサイトでは、最大高さとオーバーフローを非表示に設定して、親内の画像を垂直方向に中央揃えする素晴らしいスクリプトを使用しています。
http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/
スクリプトは1つしかない場合に完全に機能しますページ上のコンテナのインスタンス。ただし、コンテナの1つ以上のインスタンスが見つかった場合、垂直方向のセンタリングは台無しになります。スクリプトは、ページ上のすべての画像に同じマージンを適用するようです。私の場合は、以下を考慮すると理想的ではありません。
- コンテナの異なるインスタンスには、異なる最大高さがあります。
- 画像の高さは異なるため、一意のマージンが必要です。
私が直面していた問題を克服するためにjQuery .each（）関数を使用してスクリプトを少し変更し、オブジェクトを反復処理して関数を実行しました。結果は次のURLで確認できます。
http://www.lewismalpas.co.uk/rwd
これは意図したとおりに機能するようで、各画像には素晴らしいマージンですが、解決できない問題をいくつか経験しており、本当に助かります。まず コンソールでJSエラーが表示されますが、修正できません。
ReferenceError: centerImage is not defined
私も予期しない結果を得ていますSafari / Chromeでは、ページの読み込みまたは更新で画像が垂直方向に中央揃えされませんが、URLフィールドでReturnキーを押すと画像が中央揃えになりますが、これは理想的ではありません。
これらの問題/不整合に関するヘルプは本当にありがたいです。
ありがとう、
ルイス
回答：
回答№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);
});
}
それ以外は大丈夫です。
それが役に立てば幸い ：）