jQueryで画像の幅と高さをリサイズする方法

jQueryでサイズが異なる画像の幅と高さをリサイズするのに、非常に困っています。

XMLもしくはJSONで複数画像をサーバーサイドから取得します。その画像の条件は、幅サイズは異なるのですが、高さは一定です。仮に高さを140pxとします。

要件を簡単に述べると、
Webサイトの画⾯幅が900pxとした場合に、画像をその幅にきっちり収まるようにしたい。（1pxや2px程度の空きがでても良い）
きっちり収めるためには、画像のリサイズを行わなければならないのですが、各行毎の画像の高さは一定とする。（一行目と二行目の高さは異なってよい。）

という感じになっています。


そのリサイズ方法ですが、
画⾯の横幅に取得した画像の先頭から何枚収まるか算出しなければなりません。
仮に以下のような画像の横幅とします。

1枚目:180
2枚目:240
3枚目:120
4枚目:80
5枚目:1000
6枚目:600
7枚目:300
8枚目:500
9枚目:
10枚目:
・
・
・

これらの画像横幅を足すと

180 + 240 + 120 + 80 + 1000 = 1620

となるため、画面幅の900を超えてしまいます。
そのため4枚目までしか画面幅に収まりません。なので4枚目までの画像幅を足します。

180 + 240 + 120 + 80　= 620

900(画面幅) ÷ 620(幅総数) x 140(画像の規定高さ) = 203(切り捨て)
となり、その行に納まる4枚の画像の高さを203pxにして、それに併せて4枚の画像の幅サイズをリサイズします。

1枚目の画像の場合：
180 × (203 ÷ 140) = 261

2枚目の画像の場合：
240 × (203 ÷ 140) = 348

としていくと、4枚の画像の幅総数が899となり画面幅に収まります。高さは4枚すべて203pxです。

5枚目が1000と900を大幅に超えていますので、この場合以下のように高さをだします。

900 ÷ 1000 × 140 = 126

1000 × (126 ÷ 140) = 900

として幅900px、高さ126pxとリサイズします。

という具合に6枚目、7枚目、8枚目の画像の幅総数が900以内として、
すべての画像のそれぞれ高さと幅をリサイズしていきます。

こういった場合に、画像それぞれの幅を見て、画面幅の収める枚数の画像を決めて、
上記のような条件でリサイズしていけばよいでしょうか。

何卒、力添えをお願い致します。

No.1 回答者： fujillin 回答日時： 2013/07/16 12:28

回答がないようなので…

ご提示の方法で幅900にそろえることは可能だと思いますが、どのような全体像を望んでいらしゃるのでしょうか？

画像の順序は入替えないものとしても、例えば幅が　1000、100、1000、500のような順で画像が並んでいるとしてご提示の方法だと
1000（高さ126）
100　（高さ1260）
　　・・・
という並びになります。
これが予定通りであるなら、ご提示の方法でよいのではないでしょうか。

別の考え方をすれば、
1000+100（高さ114）
　　・・・
あるいは、
1000（高さ126）
100+1000（高さ114）
　　・・・
のような並べ方も可能でしょう。

また、最後に端数が残った時に、それを幅900で拡大するのかなどの取り扱いも考慮しておく必要もあるかと思います。

この回答へのお礼

ご回答ありがとうございます。
画像の総数とスクリーンサイズによってリサイズするというあまり見たいようなパターンとなっています。
ですが、なんとか自己解決できました。

お礼日時：2013/07/16 14:53