特定の画像ファイルでレイアウトが崩れる

質問

こんばんは！！
今現在業務で画像サイトを作成していますが、
どうしても解らないことがあるので質問させてください。

ある特定のファイル(14メガ、縦2560、横1980)のファイル
を表示するとレイアウトが崩れてしまいます。
他のファイルを表示する際は問題がないのですが、画像ファイル
が大きすぎるためでしょうか？

実際のソース箇所は以下の通りです。

<td><img src="http://localhost:8080/ｘｘｘｘ/61/01.jpg" width="193" height="130" border="0" class="img_book"></td>

自分なりにサイズを変えてみたり色々試したのですが、
解決できません。会社のデザイナーの方にも聞いてみたのですが
解らないとのことです。表示する画像サイズに制限をかければ
すみことかもしれませんが、表示方法によって解決できない
もんだいなのでしょうか？

回答No.3

Oh-Orange

★レイアウトが壊れるのは縦横比が正しくないからです。
・元の画像が 2560×1980 ですから縦横比は 2560÷1980≒1.29です。
　でもタグは 193×130 ですから縦横比は 193÷130≒1.48になります。
　縦横比が 1.29 と 1.48 はどう見ても画像が歪んでいます。
・まずはサムネイル(縮小画像)を作成して下さい。
　下の『参考URL』のソフトで作れます。
　タグは下のようにします。

<td>
<a href="実際の画像.jpg">
<img src="サムネイル画像.jpg" width="xxx" height="yyy" border="0" class="img_book">
</a>
</td>

最後に:
・『img』タグの『width="xxx"』と『height="yyy"』にはサムネイル画像のピクセル値を指定して下さい。
・あとレイアウトが崩れる場合は『td』タグの横位置を『中央』、縦位置を『中間』に設定してみましょう。
　つまり、『<td align="center" valign="middle">』と画像データのセルだけ指定します。この指定方法は
　スタイルシートで CLASS で定義しても良いです。→この方が見やすくなります。また、『margin:0px』も
　つけて置けばレイアウトが崩れなくなると思います。
・それからもう一つ、img タグに付けられた『class="img_book"』のスタイルシートの内容を見直して下さい。
　多分、ここの設定でレイアウトが崩れる原因ではないでしょうか。→確認して下さい。または補足して！
・以上。おわり。→まずはサムネイル画像と『align』属性などを試して見て下さい。

参考URL：

http://www.vector.co.jp/soft/win95/art/se158435.html

回答No.2

goldfox

> ある特定のファイル(14メガ、縦2560、横1980)のファイル
> を表示するとレイアウトが崩れてしまいます。

具体的に、どのようにレイアウトが崩れるのでしょう？

高比率で縮小して画像が荒くなるのはともかくとして、
縦2560、横1980の画像を縦130、横193で表示しようとすれば、
縦横の比率が違いますから、画像そのものがゆがんでいませんか？

回答No.1

noname#56851

いくらなんでも、大きすぎます。
このファイルが落ちてくるのを待ってくれるのは、よほど気の長い人かなと思います。
これで、サーバーが重くなったら目も当てられません。
この場合サムネイルを作るのが常道だと思います。