JavaScript secara dinamis mengubah ukuran gambar

Masalah umum saat memperbarui artikel di situs web Anda sendiri adalah ilustrasi artikel terlalu lebar, sehingga menyebabkan seluruh halaman web terdistorsi. Akan terlalu merepotkan untuk menskalakan setiap ilustrasi sebelum menyisipkannya.

Hal semacam ini saya temui di artikel yang saya tulis beberapa waktu lalu. Kemudian, saya menggunakan properti CSS overflow dan max-width untuk sementara menyelesaikan masalah deformasi halaman. Keuntungan cara ini adalah sederhana, namun kelemahannya adalah akan merusak efek beberapa detail.

Misalnya, overflow:hidden berarti ketika lebar elemen internal lebih besar dari bingkai induk, kelebihan lebarnya akan disembunyikan. Melakukan hal ini dapat menyebabkan beberapa konten tiba-tiba terpotong dan disembunyikan, yang sangat disayangkan oleh penonton.

Jika Anda membatasi lebar maksimum ilustrasi artikel melalui atribut max-width, Anda perlu mempertimbangkan kompatibilitas masing-masing browser. IE6 tidak mendukung atribut ini. Menurut saya, meskipun beberapa browser mendukung atribut ini, gambarnya tidak diskalakan secara proporsional (sepertinya Safari dan Opera, saya tidak ingat dengan jelas. Jika ini dilakukan, itu akan berbahaya kepada pengguna browser ini.

Oleh karena itu, yang akhirnya saya pilih adalah mengubah ukuran gambar secara dinamis melalui JavaScript. Cara ini memiliki kompatibilitas yang baik dengan berbagai browser (saat ini sangat sedikit orang yang menonaktifkan JavaScript, bukan?), dan jika tema diubah, ukuran maksimum ilustrasi artikel juga dapat diubah secara fleksibel.

Ada dua solusi. Karena tema yang saya gunakan dimuat dengan perpustakaan jQuery, maka dapat diimplementasikan dengan kode berikut:

$ ( dokumen ) . siap ( fungsi ( ) {
 $ ( '.post img' ) masing-masing ( fungsi ( ) {
 var maxWidth = 100 ; // Lebar gambar maksimum
 var maxHeight = 100 ; // Tinggi maksimum gambar
 var rasio = 0 ; // rasio skala
 var lebar = $ ( ini ) . lebar ( ) ; // Lebar sebenarnya dari gambar
 var height = $ ( this ) . height ( ) ; // Tinggi sebenarnya dari gambar

 // Periksa apakah gambarnya super lebar
 jika ( lebar > maxWidth ) {
 rasio = maxWidth / lebar ; // Hitung rasio skala
 $ ( ini ) css ( "lebar" , maxWidth ) ; // Atur lebar tampilan sebenarnya
 tinggi = tinggi * rasio ; // Hitung tinggi setelah skala yang sama
 $ ( this ) .css ( "height" , height * ratio ) ; // Tetapkan ketinggian setelah penskalaan proporsional
 }

 // Periksa apakah gambarnya sangat tinggi
 jika ( tinggi > maxHeight ) {
 rasio = maxHeight / tinggi ; // Hitung rasio skala
 $ ( ini ) css ( "tinggi" , maxHeight ) ; // Atur tinggi tampilan sebenarnya
 lebar = lebar * rasio ; // Hitung tinggi setelah skala yang sama
 $ ( ini ) css ( "lebar" , lebar * rasio ) ; // Tetapkan tinggi setelah penskalaan proporsional
 }
 } ) ;
 } ) ;

Jika Anda tidak ingin memuat perpustakaan jQuery, Anda dapat menggunakan kode berikut:

 fungsi ResizeImage ( gambar , lebar maksimum ilustrasi , tinggi maksimum ilustrasi )
 {
 if ( image.className == "Thumbnail" )
 {
 w = gambar.lebar ;
 h = gambar.tinggi ;

 jika ( w == 0 || h == 0 )
 {
 gambar.lebar = lebar maksimal ;
 gambar.tinggi = tinggi maksimal ;
 }
 lain jika ( w > h )
 {
 jika ( w > lebar maksimal ) gambar.lebar = lebar maksimal ;
 }
 kalau tidak
 {
 jika ( h > maxheight ) gambar. tinggi = maxheight ;
 }

 image.className = "Gambar Kecil Berskala" ;
 }
 }

Menggunakan JavaScript murni sedikit lebih merepotkan karena Anda perlu menambahkan class="Thumbnail" secara manual ke gambar, tetapi efek akhirnya sama.

Teks asli: Menyesuaikan ukuran gambar secara dinamis

Terima kasih bolo atas kontribusi Anda