javascript - ウィンドウが画像よりも大きい場合を除き、画像をウィンドウに押し込みます

Question

さて、私のウェブページの本文に画像があります。

ユーザーのウィンドウの高さが800px（画像の高さ）未満の場合は、画像を押しつぶす必要があります（ユーザーが画像の高さ全体を確認できるようにするため）。

一方、ウィンドウの高さが800ピクセルを超える場合は、画像を垂直方向の中央に配置する必要があります。

ティッパーはありますか？

ありがとう。

Answer 1

jQueryを使用すると、次のようなことができます。

var win = $(window);
win.load(function() {
  var image = $("#img");
  if (image.height() > win.height()) {
    image.height(win.height());
  } else {
    // assuming your image is positioned absolute
    // you should measure its dimensions and then position it
    // depends on the ways it should be centered... in the current window or the whole document?
  }
});

win.resize(function() { /* do something */ });

画像が大きい場合は、画像をウィンドウの高さに合わせてサイズを変更するだけのトリックを実行する必要があります。もちろん、セレクターを画像要素に適合させる必要があります...

編集：サイズ変更コールバックを追加