![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67b6d)
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以内として、
すべての画像のそれぞれ高さと幅をリサイズしていきます。
こういった場合に、画像それぞれの幅を見て、画面幅の収める枚数の画像を決めて、
上記のような条件でリサイズしていけばよいでしょうか。
何卒、力添えをお願い致します。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
回答がないようなので…
ご提示の方法で幅900にそろえることは可能だと思いますが、どのような全体像を望んでいらしゃるのでしょうか?
画像の順序は入替えないものとしても、例えば幅が 1000、100、1000、500のような順で画像が並んでいるとしてご提示の方法だと
1000(高さ126)
100 (高さ1260)
・・・
という並びになります。
これが予定通りであるなら、ご提示の方法でよいのではないでしょうか。
別の考え方をすれば、
1000+100(高さ114)
・・・
あるいは、
1000(高さ126)
100+1000(高さ114)
・・・
のような並べ方も可能でしょう。
また、最後に端数が残った時に、それを幅900で拡大するのかなどの取り扱いも考慮しておく必要もあるかと思います。
ご回答ありがとうございます。
画像の総数とスクリーンサイズによってリサイズするというあまり見たいようなパターンとなっています。
ですが、なんとか自己解決できました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ピクチャーボックスの大きさに...
-
複数の画像を1枚にしたファイ...
-
paintに貼り付けてある画像の大...
-
同盟用のバナーサイズ。
-
L字みたいな記号の表示
-
iPhoneで HTMLファイルを閲覧
-
シーサーブログのヘッダー画像...
-
テーブルセル余白(例えば左側...
-
ブログの画像を復元したい
-
ホームページ作成ソフトを変更...
-
FFFTPで更新分だけアップするには
-
画像
-
Vue+Laravelのデザインテンプ...
-
ネットでアップロードを間違っ...
-
MovableTypeでサイドバーを常に...
-
PHP内で同じようにCSSを表示さ...
-
ブログ(goo)に写真を載せ...
-
忍者ブログでの画像の挿入につ...
-
gooブログのバーナーの貼り付け...
-
ブログのリンクの仕方を教えて...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ピクチャーボックスの大きさに...
-
複数の画像を1枚にしたファイ...
-
一行は何ピクセル?
-
jQuery BoxerというLightBoxに...
-
lightboxを使用したのですが画...
-
ページサイズの目安は?
-
LightBoxなどで画像サイズが指...
-
画像サイズが見る人の環境によ...
-
paintに貼り付けてある画像の大...
-
Web上での標準的な画像サイズ(...
-
GIF画像のサイズを取得するには
-
VB6でピクチャーのサイズの出し方
-
同盟用のバナーサイズ。
-
pop upウィンドウを画像サイズ...
-
Powerpointに貼った画像のサイ...
-
画像の縮小をすると粗くなって...
-
jpegの圧縮率の取得
-
VB.NETでの画像処理について
-
スマホ対応ウェブサイトの横幅...
-
ExcelVBAで挿入画像の縦横サイ...
おすすめ情報