• ベストアンサー

この計算の意味を教えて下さい。

いつもはプログラムのカテゴリに投稿させてもらってるのですが、バリバリの文系でして、よくプログラム中の計算で行き止まってしまいます。 今回は、この計算の説明をしていただけないでしょうか? 大きい画像を小さい画像に縦横の比率を変えずにリサイズする場合の問題なのですが、 リサイズするサイズをはじめに定義してあります。 横幅 WIDTH = 200 高さ HEIGHT = 160 です。 元画像の横幅 sx 元画像の高さ sy もし横幅が高さより大きかった場合は 横幅は WIDTH にして 高さは WIDTH * sy / sx となっています。 逆に高さの方が大きかった場合は 高さを HEIGHT にして 横幅を HEIGHT * sx /sy で求めています。 何故このような計算になるのか説明をしていただけないでしょうか? 説明がわかりにくかったらごめんなさい。 よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • PAP
  • ベストアンサー率62% (1578/2526)
回答No.3

まず1つ疑問がありますが、 元画像の横幅 200 元画像の高さ 180 だとします。これは横幅が高さよりも大きい状態ですから、 横幅は WIDTH=200 にして、 高さは計算式から 200*180/200=180となります。 この結果は高さHEIGHT=160 を超えますが、それでもいいのでしょうか? もし、リサイズの際に元画像の縦横比を変えず、なおかつ定義した 横幅 WIDTH = 200 と 高さ HEIGHT = 160 の枠内に収めるならば、 ご質問の判別・計算式では上記のような矛盾が出ます。 また、元画像が正方形の時は縦横のどちらが大きいかの判別式によって 200x200と160x160という2種類のリサイズ画像サイズが 存在しえます。 もし、高さ160x横幅200の枠内におさめるならば、 160/200=0.8 ←定義した枠の高さ/横幅 を基準として、元画像の高さ/横幅 sy/sx が 0.8 より小さければ (例:160/400)上段の横幅をWIDTH に、大きければ(例:200/200) 下段の高さをHEIGHTにする式にあてはめないとダメではないでしょうか? 元画像の高さ/横幅は sy/sx です。 もしsy/sxが 0.8 より小さかった場合は(横長タイプ) 横幅は WIDTH にして 高さは WIDTH * sy / sx 逆にsy/sxが 0.8 より大きかった場合は(縦長タイプ) 高さを HEIGHT にして 横幅を HEIGHT * sx /sy とすれば枠内に収まります。 計算式はイメージとして 横幅を基準に高さを出すには 横幅x高さ÷横幅 → 高さ 高さを基準に横幅を出すには 高さx横幅÷高さ → 横幅 と考えるとわかりやすいかもしれません。 なお、ここでは横幅の200が暗算しやすいので高さ/横幅としました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • debut
  • ベストアンサー率56% (913/1604)
回答No.2

縦横の比率を変えないのだから、 横幅>高さ のとき、   元画像の横幅:元画像の高さ=sx:sy・・・(1)  リサイズ後の高さをHとすると、   リサイズ後の横幅:リサイズ後の高さ=WIDTH:H・・・(2)  (1)=(2)なので、sx:sy=WIDTH:H  (比では、a:b=c:dのときad=bcがなりたつので、)  sx*H=sy*WIDTH  H=WIDTH*(sy/sx)  「簡単にいえば、横幅sxをWIDTHにしたということは、   画像を(WIDTH/sx)倍したので、高さsyも(WIDTH/sx)倍するから   sy*(WIDTH/sx)=WIDTH*(sy/sx)になる、ということです。」 横幅<高さのとき、同じように考えて、(リサイズ後の横幅をWとして)  sx:sy=W:HIGHT  sy*W=sx*HIGHT  W=HIGHT*(sx/sy)  

全文を見る
すると、全ての回答が全文表示されます。
  • KRASU
  • ベストアンサー率22% (40/177)
回答No.1

例えばsxとsyに数値当てはめて考えて見ましょう 例えばsx=400,sy=200とすれば、 横幅のほうが大きいから横幅を基準として、 横幅=WIDTH=200ですね。 次に縦幅ですが元の比率を変えずに、ということなので比率を考えます。 sx:sy=400:200=2:1ですね。つまり縦幅は横幅の2分の1ということになります。これを式で表せば 縦幅=WIDTH*sy/sx=200*400/200          =200*1/2          =100 となります。 縦幅のほうが大きい場合も同様です。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • max-widthを指定した場合の縦サイズのリサイズ方法

    画像のサイズをCSSのmax-widthを指定した場合、縦のサイズを、縦横比率を変えずに自動でリサイズする方法を探しています。 CMS (Movable Type)でサイトを構築しており、ブログ記事の本文に「画像挿入」ボタンを利用して挿入するため、<img src="photo.jpg" width="600" height="400">とwidthとheightが指定された状態のため、max-widthで400pxと指定すると画像が縦長になってしまっています。 どのようにすれば縦横比率を変えず、さらにmax-widthのような形で縦のサイズを自動でリサイズする事ができますでしょうか?宜しくお願いします。

    • ベストアンサー
    • HTML
  • Flashで外部読み込み画像の縦横比を維持したままリサイズするには?

    Flashで、外部読み込み画像を、指定したサイズにリサイズして読み込みたいと思い、 ネットで色々と検索してみて、下記のスクリプトに辿り着いたのですが、 このスクリプトだと、読み込む画像の縦横比が、サイズ指定した縦横比と違った場合でも、 無理矢理に指定したサイズの縦横比にリサイズされて読み込まれてしまいます。 要点を掻い摘んで説明すると、、、 ========================================================== 読み込む画像の、 横幅が 120以上の大きさなら、横幅を 120にリサイズして、 縦の大きさは、それに比例して縮小。 縦の大きさが 160以上なら、縦の大きさを 160にリサイズして、 横幅は、それに比例して縮小。 ========================================================== と言った事がしたいのです。 ↑上記のように、縦横比を維持したまま、外部読み込み画像を リサイズして読み込むには、一体どうすれば良いのでしょうか? ネットで丸1日かけて調べてみましたが、どうしても、その方法が分からず、 途方に暮れています。 どなたか、Flashで外部読み込み画像の縦横比を維持したままリサイズする方法を ご存知の方が居られましたら、何卒ご教示よろしくお願い致しますm(_ _)m --------------------------------------------------- var mcLoader:MovieClipLoader = new MovieClipLoader(); var listenerObject:Object = new Object(); listenerObject.onLoadInit = function() { photoFrame._width = 120; photoFrame._height = 160; }; mcLoader.addListener(listenerObject); mcLoader.loadClip("photo001.jpg", photoFrame); --------------------------------------------------- 環境 / win XP / Flash CS3 / アクションスクリプト 2.0

    • ベストアンサー
    • Flash
  • 画像を、縦横の比率を崩さずに拡大したい。

    初心者です。よろしくお願いいたします。 HTMLの<img src="~">で画像を表示しました。 しかし画像が小さかったため大きくしようと思い、 width,heightを使い、ピクセル数を設定して大きく したところ、縦横の比率が崩れてしまい歪んで しまいます。 縦横の比率を崩さずにそのまま拡大したい場合は どのようにすればよろしいですか? アドバイスよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • jquery cycleで画像リサイズ

    jquery cycle pluginを使用して、画像のスライドをしています。 画像を画面中央に全画面表示をしたいのですが、 スライドする画像のサイズがそれぞれ異なるため、 画像の比率を固定して、縦横のサイズで大きい方を 画面に合わせて表示したいのです。 私が考えたのは、 (全文は載せられません。すみません。) <div id="slideImage"> <img id="slide1" src="test01.gif"> <img id="slide2" src="test02.gif"> ・・・ <img id="slide5" src="test05.gif"> </div> ↑のようにスライドする画像があるとして、 下記のjavascriptでスライドする画像分ループさせて、 id部分を変数にして、縦横どちらかが大きかったら・・・という 計算をしています。 function resize(){ for(var i=1; i<6; i++){ var slideNo = "slide" + i; var w = document.getElementById(slideNo).width; var h = document.getElementById(slideNo).height; if(w >= h){ document.getElementById(slideNo).width = screen.width; }else{ document.getElementById(slideNo).height = screen.height; } } } 確かにこれだとidがslide1の場合はサイズをリサイズしてくれるのですが、 slide2以降をリサイズしてくれません。 ループは確かに回っているし、 if文の前でリサイズ前の画像サイズをちゃんと取得しているのですが、 なぜかscreen.width(screen.height)の値が入ってくれません。 jquery cycle pluginだとそれぞれの画像のリサイズはできないのでしょうか。 みなさんお力お貸しください!!

  • 画像のwidth heightを同じ比率で縮めたい

    外部参照している画像があります。 RSSでその画像のurl width heightを取得し、 画面に表示しています。 ただ、widthが表示している画面を越えてしまう事があるので、 超えた場合は、width heightを同じ比率で縮めて収まるようにしたいです。 画面に表示できる最大サイズは590です。 取得できた画像は、width 640 height 480です。 width⇒590にした場合、heightは何になるのでしょうか。。 また、これを求めた計算式を教えて頂けないでしょうか。

  • ドリームウィバー8(Dreamweaver8)で簡単にサムネイル指定

    ドリームウィバー8でサムネイル画像を作成する方法は? 現在、次の様な手順でサムネイル画像を作ってます。 469px × 423pxの画像を幅300pxのサムネイル表示にして、右クリックで拡大表示させたいとき・・・ 1.画像を貼り付ける(画像の説明HTMLソース) <img src="http://○○○○○○.jpg" width="469" height="423" alt="画像の説明" /> 2.サムネイル表示用のHTMLタグを手入力する つまり、1番のHTMLソースを間に挟む <a href="http://○○○○○○.jpg" target="blank">画像の説明HTMLソース</a> 3.サムネイルの大きさを計算する。 サムネイル幅を300px。元画像の大きさが469pxなので 300÷469=0.63 たて横同じ比率で縮小したいので縦に同じ比率を掛ける 423×0.63=266.49 4.HTMLソースの幅と高さをそれぞれwidth="300" height="266"に修正 完成HTMLソース <a href="http://○○○○○○.jpg" target="blank"> width="469" height="423" alt="画像の説明" /></a> この手順どう考えてもめんどうだと思います。ドリームウィバー8(Dreamweaver8)で簡単に出来るのではないかと調べているのですが、なかなか見つかりません。どなたか良い方法をご存知でしたら教えてください

    • ベストアンサー
    • HTML
  • 正円の中にある点のx軸とy軸の割合を計算する方法

    スマートフォン向けゲームプログラムの一環として、画面上でアナログスティックを操作できるプログラムを試作しています。ここでcx,cyを中心とする円の中にある点における、x軸とy軸の比率を算出したいのですがどのようにすればよいでしょうか。たとえば、参考画像のように、円周上にある場合はsx,syのいずれかは必ず最大、もしくは最小値をとります。

  • 縮小画像をImage型にいれるには?

    画像の縦横サイズに関係なく 100*100のサイズにリサイズして(縦横比率を保った状態 Image型に設定したいのですが どのような方法があるのでしょうか? 縦横比率を無視したリサイズなら GetThumbnailImageを使用して出来る事は確認しました。 何か参考になりそうな情報がありましたら よろしくおねがいします。

  • UNIXのコマンドラインで動作する画像リサイズツール

    現在、サーバ上にhttpでアップロードされた画像をリアルタイムでリサイズして表示するシステムを組んでいます。 そこで画像をリサイズするフィルターを使いたいのですがコマンドラインレベルで ・画像ファイル名 ・変換後ファイル名 ・元ファイル width ・元ファイル height ・変換後ファイル width ・変換後ファイル height を入力として動作するツール(もしくはそれに近いもの)があれば教えてください。 画像ファイルのフォーマットはjpegです。(gif、pngに関してもあれば)

  • 固定枠内への最大画像の貼り付け

    HTMLで作成された固定枠内に、CGIを使用して複数の画像データを、 1枚ずつ表示させるのですが、現在の状態では画像データの大きさによってレイアウが不均一になってしまいます。 そこで、JavaScriptを利用して、元画像の縦横比を保ったまま、 任意の大きさの枠の中で、画像データの大きい方の長さが枠内いっぱいになるように表示したいのです。 つまり、 縦横比のそれぞれ違った、フレームと画像があり、 その画像を、フレームの中心部から拡大して行ったとき、 縦横いずれか先にフレームに接する大きさのところまで拡大表示される 大きさで表示させたいのですが。 下記のスクリプトでは、縦横共通の最大値しか指定できません。 縦横それぞれに最大値を指定できるようにし、 上記の様に表示させるには、 どの様な記述方があるでしょうか。 ご教授、宜しくお願いします。 (スクリプト要素) size = 120 ; function resize(id) { if (document.images[id].width > document.images[id].height) document.images[id].width = size ; else document.images[id].height = size ; } (BODY要素) <img src="hoge.jpg" id="sample1" onLoad="resize('sample1')" />

このQ&Aのポイント
  • foobar2000で開くとエラーが出て聴けない
  • 持っているCDのバックアップにExact Audio Copyを使って無圧縮の.cueと.wavファイルを作成
  • あるファイルで.cueをfoobar2000で開くとエラーが出て曲を聴くことができない
回答を見る