javascript - JavaScript で大きな画像のサイズを自動変更しますか?

Question

私は、人々がbbコードでお互いのプロフィールに画像を投稿できるようにするアプリケーションを持っています. 問題は、いくつかの非常に大きな画像を投稿することです。これは、閲覧時にサイトの他の部分を覆ってしまいます。

クライアント側で画像を縮小して、x x y の寸法を超えないようにするにはどうすればよいですか?

編集。これらは、[img] タグを付けて投稿する myspace プロフィール スタイルの画像です。サイト自体にアップロードまたは保存されることはありません。

Answer 1

代わりに、サーバー側でそれらを縮小してください。とにかくそこに保管していると思います。そこに保存すると、サーバーからクライアントに渡されるデータの量が減ります。大きな画像を保存すると、要求ごとに多くの不要なデータがクライアントに送信され、速度が低下します。

本当にクライアント側でやりたい場合は、CSS がサイズを変更してくれると思います。

編集: 以下を試してみてください。別のフォーラムで使用されているのを見て、IE で動作し、ほとんどのブラウザーで動作するはずです: css を使用して、img を次のように設定します。

width: 590 px;

そしてそれを囲むdiv：

max-width: 590 px;

Answer 2

ウェブサイトのアップロード時に画像のサイズを変更する方がはるかに良いでしょう. このようにして、サイトに最も適した最大サイズを適用できます。

画像をレンダリングしてからそのサイズを調整することに依存している場合、画像がフルサイズで表示されてから縮小されるため、ちらつき効果が生じます。

もう 1 つのオプションは、表示されている画像を、設定されたサイズとオーバーフロー: 非表示の div 内に配置することです。

Answer 3

CSS:

#post img {
    max-height: 1000px;
    max-width: 500px;
}