![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
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で質問しましょう!
似たような質問が見つかりました
- その他(Microsoft Office) 複数の写真を1枚に印刷 5 2023/05/05 22:41
- HTML・CSS 要素の幅をいろんな写真の幅に合わせたい。 1 2022/07/25 20:11
- JavaScript ブラウザの横幅に応じてとある画像(e.jpg)を画面いっぱいに表示できるようにしたいです。(写真の横 1 2022/10/06 21:17
- Visual Basic(VBA) 【VBA】写真の貼り付けコードがうまく機能しません。 5 2022/09/01 18:43
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- フリーソフト GIMPの使い方 1 2022/07/11 13:52
- 引越し・部屋探し 【冷蔵庫搬入の幅について】 引っ越しをします。 冷蔵庫をかおうと思っています。 急ぎです。 価格は安 2 2023/06/15 19:12
- フリーソフト 倍率自動調整して全画面表示できるフリーの画像ビューアー 1 2023/08/24 10:55
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ASP.NETで画像の高さと幅を取得
-
ピクチャーボックスの大きさに...
-
フラッシュと音楽
-
jpegの圧縮率の取得
-
ウインドウの大きさに合わせた...
-
pop upウィンドウを画像サイズ...
-
GIF画像のサイズを取得するには
-
L字みたいな記号の表示
-
シーサーブログのヘッダー画像...
-
ダウンロードはアップロードと...
-
PDF Embeddeの 不具合 - PDFフ...
-
Wordpressでアイキャッチ画像を...
-
JISマークってなんですか?
-
iPhoneで HTMLファイルを閲覧
-
gooブログについて ブログ作成...
-
borderの太さを1px以下に見せ...
-
【緊急】FTPエラーが発生してし...
-
ブログに画像を選択して、アッ...
-
gooブログに複数枚画像をのせたい
-
デコログの説明欄
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ピクチャーボックスの大きさに...
-
複数の画像を1枚にしたファイ...
-
Powerpointに貼った画像のサイ...
-
paintに貼り付けてある画像の大...
-
Dreamweaverで縦の区切り線あり...
-
ページサイズの目安は?
-
一行は何ピクセル?
-
jQuery BoxerというLightBoxに...
-
楽天RMSについて
-
動画のサイズ指定
-
ASP.NETで画像の高さと幅を取得
-
同盟用のバナーサイズ。
-
javaで画像のトリミングをする方法
-
画像サイズが見る人の環境によ...
-
スマホ対応ウェブサイトの横幅...
-
GIF画像のサイズを取得するには
-
jpegの圧縮率の取得
-
ExcelVBAで挿入画像の縦横サイ...
-
htmlでのjpeg表示について
-
DIRECTXのスプライト描...
おすすめ情報