javascript - その場で画像のサイズを変更し、縦横比を維持します

Question

元の画像の縦横比を維持しながら、異なるページに異なるサイズで表示するために画像のサイズを変更する必要があります。

プログラムで実行できますか、それともさまざまなサイズの画像をプリロードする必要がありますか

Answer 1

画像の幅または高さだけを設定し、他の寸法を指定しない場合、ブラウザはアスペクト比を維持しながら画像を比例的に拡大縮小します。

作業デモ： http： //jsfiddle.net/jfriend00/NRLQ5/

Answer 2

Css3を使用している場合は、transform：scale（scalefactor）を使用できます。

Answer 3

System.Web.Helpers アセンブリからWebImageクラスを使用できます。Resize メソッドを提供します。これにより、アスペクト比を変更せずにサイズを変更できます。

public WebImage Resize(
    整数幅、
    整数の高さ、
    bool preserveAspectRatio、
    bool preventEnlarge
)

それに加えて、ファイル パス、ストリーム、またはバイト配列を使用して WebImage インスタンスを作成し、透かしを簡単に追加できます。

WebImage image = new WebImage(Server.MapPath("~/upload/my_image.png"));
WebImage image_small_1 = image.Resize( Convert.ToInt32(image.Width / 2), Convert.ToInt32(image.Height / 2), true, true );

画像をディスクに保存するか、環境でキャッシュに保存できる場合

image_small_1.Save(Server.MapPath("~/upload/my_image_small_1.png"), "png", true);

byte[] to_be_cached = image_small_1.GetBytes("png");