Mengubah Ukuran Gambar Javascript

Apakah ada yang tahu cara mengubah ukuran gambar secara proporsional menggunakan JavaScript?

Saya telah mencoba memodifikasi DOM dengan menambahkan atribut height dan width dengan cepat, tetapi tampaknya tidak bekerja pada IE6.

Adriano
Pertanyaan edit 9 Agustus 2018 в 3:44
Pemrograman
internet-explorer-6 javascript image-manipulation
4 Oktober 2008 в 4:39
5 tayangan
Larutan

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.

Komentar (1)

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;
Neall
Jawaban edit 4 Oktober 2008 в 4:51
Komentar (0)

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.

Komentar (0)