縦横のサイズがバラバラのイメージファイルを一定のサイズに指定したdiv

質問

縦横のサイズがバラバラのイメージファイルを一定のサイズに指定したdiv内に縦横の比率を固定したまま収めたいと思っています。
たとえばcssでdivのサイズを100px×100pxに指定。
その中に100px×200pxのイメージファイルを50px×100pxで表示。
別の100px×100pxのdivに200px×100pxの画像を100px×50pxで表示。
ということをやりたいのですが、イメージファイルのサイズがランダムでそれぞれにサイズ指定をすることが出来ないので、
一括でサイズ指定することは出来ないのでしょうか?

回答No.5

noname#119957 · ベストアンサー

ＣＳＳは、ダメなようですね。イメージのURLが与えられるAPIであれば、
getimgsizeのような関数で<img>タグのサイズ指定を変数処理できるとおもうのですが..ＵＲＬを得ることはできませんか？
http://www.border.jp/midilin/memo/index.php?UID=1153290918

お礼

縦長用と横長用のcssを用意してgetimgsizeでwidth,heightを取得、ifで振り分けという
手順でやりたいことが出来ました。アドバイスありがとうございます。

回答No.4

noname#119957

取得するイメージファイルがランダムな為、
ken_tyanさんの方法ですと別のイメージファイルに変わった時、
縦横のサイズが変わると縦横比が変わってしまうために使えないのです。
表示イメージで近いのはgoogleで画像検索したときに表示される様に
縦長のイメージファイルは縦を基準に合わせ縦横比固定で拡大、または縮小
横長のイメージファイルは横を基準に合わせ縦横比固定拡大、または縮小
という事をしたいのです。
>>
それならば、横のサイズだけをＣＳＳで指定すれば、たての長さは比率により自動的に算出されて表示されるようになると思います。

お礼

回答ありがとうございます。
説明がうまく出来ていないせいでやりたいことが伝わっていないかもしれません。
横のサイズだけをＣＳＳで指定すると「display:block」の為縦長の画像は切れてしまいますよね？
商品検索APIから取得する画像なので、縦長か横長かはキーワードによって変化するため分からないのです。
どんなサイズの画像でも指定したサイズ内に縦横の比率を変えずにフィットさせる都合の良い事は出来ないのでしょうか？
やはり表示バランスが崩れる事をあきらめるか余剰画像部分をカットして表示しかないのですか？

回答No.3

noname#119957

html
<div class="img-area1"><img src="hogehoge" /></div>
<div class="img-area2"><img src="hogehoge" /></div>
css
.img-area1{
width:"xx";
height:"yy";
}
.img-area1 img{
display:block;
width:"xx";
height:"yy";
}
.img-area2 {
width:"xx2";
height:"yy2";
}
.img-area2 img{
display:block;
width:"xx2";
height:"yy2";
}

imgタグに対してＣＳＳでサイズ指定した場合は、ＨＴＭＬタグのサイズ指定よりも、ＣＳＳの指定値が優先されます。

お礼

回答ありがとうございます。
取得するイメージファイルがランダムな為、
ken_tyanさんの方法ですと別のイメージファイルに変わった時、
縦横のサイズが変わると縦横比が変わってしまうために使えないのです。
表示イメージで近いのはgoogleで画像検索したときに表示される様に
縦長のイメージファイルは縦を基準に合わせ縦横比固定で拡大、または縮小
横長のイメージファイルは横を基準に合わせ縦横比固定拡大、または縮小
という事をしたいのです。
説明不足ですみません。

回答No.2

srxmk3pro

No1です。
リンク先を間違えました。
http://i-section.net/software/shukusen/

お礼

回答ありがとうございます。
やりたいことはAPIからイメージファイルを取得して一定サイズに表示させたいので残念ながらこの方法は使えないのです。
縮小だけでなく拡大もあるかもしれません。
縦と横のどちらか大きい方のサイズを縦横比固定で100pxにしたいのです。

回答No.1

srxmk3pro

イメージファイルの形式がわかりませんが、Ｊｐｅｇならこうしたソフトはいかがでしょうか？
C:\Program Files\Shukusen\help\help.html