Mengubah Ukuran Gambar Javascript

Untuk memodifikasi gambar secara proporsional, cukup ubah salah satu properti css lebar/tinggi, biarkan yang lain disetel ke otomatis.

image.style.width = '50%'
image.style.height = 'auto'

Ini akan memastikan bahwa rasio aspeknya tetap sama.

Ingatlah bahwa browser cenderung suck dalam mengubah ukuran gambar dengan baik - Anda mungkin akan mendapati bahwa gambar yang diubah ukurannya terlihat mengerikan.

Alih-alih memodifikasi atribut tinggi dan lebar gambar, cobalah memodifikasi tinggi dan lebar CSS.

myimg = document.getElementById('myimg');
myimg.style.height = "50px";
myimg.style.width = "50px";

Satu "gotcha" yang umum adalah bahwa gaya tinggi dan lebar adalah string yang menyertakan unit, seperti "px" pada contoh di atas.

Sunting - Saya pikir pengaturan tinggi dan lebar secara langsung daripada menggunakan style.height dan style.width seharusnya bisa digunakan. Ini juga akan memiliki keuntungan karena sudah memiliki dimensi asli. Dapatkah Anda memposting sedikit kode Anda? Apakah Anda yakin Anda berada dalam mode standar, bukan mode quirks?

Ini seharusnya berfungsi:

myimg = document.getElementById('myimg');
myimg.height = myimg.height * 2;
myimg.width = myimg.width * 2;

Mencoba kode berikut, bekerja dengan baik pada IE6 di WinXP Pro SP3.

function Resize(imgId)
{
  var img = document.getElementById(imgId);
  var w = img.width, h = img.height;
  w /= 2; h /= 2;
  img.width = w; img.height = h;
}

Juga OK di FF3 dan Opera 9.26.