こんばんは!!
今現在業務で画像サイトを作成していますが、
どうしても解らないことがあるので質問させてください。
ある特定のファイル(14メガ、縦2560、横1980)のファイル
を表示するとレイアウトが崩れてしまいます。
他のファイルを表示する際は問題がないのですが、画像ファイル
が大きすぎるためでしょうか?
実際のソース箇所は以下の通りです。
<td><img src="http://localhost:8080/xxxx/61/01.jpg" width="193" height="130" border="0" class="img_book"></td>
自分なりにサイズを変えてみたり色々試したのですが、
解決できません。会社のデザイナーの方にも聞いてみたのですが
解らないとのことです。表示する画像サイズに制限をかければ
すみことかもしれませんが、表示方法によって解決できない
もんだいなのでしょうか?
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
★レイアウトが壊れるのは縦横比が正しくないからです。
・元の画像が 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. …
No.2
- 回答日時:
> ある特定のファイル(14メガ、縦2560、横1980)のファイル
> を表示するとレイアウトが崩れてしまいます。
具体的に、どのようにレイアウトが崩れるのでしょう?
高比率で縮小して画像が荒くなるのはともかくとして、
縦2560、横1980の画像を縦130、横193で表示しようとすれば、
縦横の比率が違いますから、画像そのものがゆがんでいませんか?
No.1
- 回答日時:
いくらなんでも、大きすぎます。
このファイルが落ちてくるのを待ってくれるのは、よほど気の長い人かなと思います。
これで、サーバーが重くなったら目も当てられません。
この場合サムネイルを作るのが常道だと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- Excel(エクセル) エクセル、画像ファイル名の書かれたセル(複数個所)に画像を一括で表示させる方法 1 2023/04/19 00:19
- Windows 10 Windows10にてjpg形式の画像が開けません 4 2022/08/24 14:37
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- その他(動画サービス) VLCメディアプレーヤーについて 1 2022/11/29 14:19
- その他(プログラミング・Web制作) pythonで、tkinterとpillowの組み合わせ 2 2022/08/16 17:42
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
背景が透明なリンクボタンで、...
-
画像クリックでクリップボード...
-
期間ごとに画像表示を切り替え...
-
「DecareステートメントにPtrSa...
-
リンク先ページのサムネイルを...
-
p target とは
-
クリッカブルMAP領域が分かる様...
-
htmlで画像上にボタンを配...
-
元々あるファビコンが消えない
-
HTMLでデスクトップの画像がでない
-
スライドショーの上にロゴマー...
-
alt属性を付けるとは?
-
HTMLにQRコードを挿入する方法
-
MEからXPに変更してからの...
-
PDFの保存ボタンが表示されません
-
gimpで文字の細工をしたい
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
画像データを実際に画面で表示...
-
ロゴマークだけを抜き取って貼...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンを押したままにする。
-
背景が透明なリンクボタンで、...
-
バナーの貼り方とバナーにリン...
-
HTMLにQRコードを挿入する方法
-
IMGタグでTIFF画像を表示
-
スライドショーの上にロゴマー...
-
pngやjsの後ろの英数字の意味は...
-
タイトルバーに画像を入れるHTM...
-
拡張子無しで画像を表示したいです
-
form以外でのpostってできますか?
-
クリッカブルMAP領域が分かる様...
-
クリックしても、リンクに飛ば...
-
予約語の表示について
-
HTMLでデスクトップの画像がでない
-
崩れたレイアウトが更新すると...
-
カーソルを合わせると文字が出...
-
カウンターのHTMLソースを教え...
-
画像クリックでクリップボード...
-
IFRAME内に収まるように画像を...
-
tifファイルが表示されない
おすすめ情報