jquery - スクロールできない Web サイトで画像のサイズを変更する

Question

クライアントがスクロールしたくない Web サイトがあるため、ヘッダーとフッターが上下に固定されています。

問題は、コンテンツ内の画像を同じ比率でサイズ変更する必要があることです。私はここに例を持っています

したがって、画像 1、2、および 3 は、ヘッダーとフッターがその位置に固定されている間、その比率を維持してストレッチする必要があります。内側の画像と外側の画像の間には 10px のマージンがあることに注意してください。

これを達成する方法についての手がかりはありますか？(CSS または jQuery またはその両方);

これは、あなたがそれで遊ぶのを助けるために私がすぐに始めたフィドルです: http://jsfiddle.net/2HJuC/2/

Answer 1

たぶん、そのようなものがうまくいくでしょう（jquery）：

http://jsfiddle.net/2HJuC/5/

これにより、適切な画像のみがサイズ変更されます。しかし、ユーザーがウィンドウのサイズを変更するとどうなりますか?

Answer 2

ヘッダーとフッターを固定の高さ/幅と絶対位置に保ち、次のような簡単な jQuery のサイズ変更修正を使用してみてください。

http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/

残念ながら、Web サイトはスクロールしないため、CSS だけを使用するだけではうまくいかないと思います。