Ukuran gambar di halaman web tampaknya sama. Di halaman artikel yang paling umum dengan banyak gambar, ukuran gambar biasanya sama dengan lebar halaman. Dengan cara ini, halaman terlihat seperti bentuk silindris lurus. Jika Anda melihat terlalu banyak tata letak ini, Anda akan merasa sangat monoton. Saya pikir situasi ini sebagian besar disebabkan oleh keterbatasan browser kuno. Namun, dengan popularitas browser modern (Firefox/Google/IE11), browser memiliki lebih sedikit dan lebih sedikit pembatasan pada desain halaman, dan imajinasi pemrogram web dapat sangat diberikan.
Misalnya, Leng Zhi: Apakah Anda tahu bagaimana [x] dari setiap jendela berasal? Dalam artikel ini, banyak gambar melebihi batas lebar teks, memberi orang perasaan mengejutkan dan mengejutkan. Pada saat yang sama, gambar besar ditampilkan dalam ukuran sebenarnya, memberi orang perasaan yang lebih mengejutkan.
Tetapi secara teknis, kita dapat dengan mudah membatasi gambar dengan lebar maksimum teks, sehingga mereka semua mempertahankan lebar, dan ketika kita tidak mengikuti lebar teks, kita membutuhkan ukuran setiap gambar. Kita dapat mendeklarasikan ukuran asli gambar saat mengedit di server. Cara yang lebih fleksibel adalah dengan secara dinamis mendapatkan ukuran asli gambar dengan menempatkan sepotong JS pada halaman dan secara dinamis mengubah ukuran tampilan gambar. Ini kompatibel dengan lebar maksimum teks lama, dan juga dapat membuat gambar muncul ukuran aslinya saat dibutuhkan.
Bagaimana cara mendapatkan ukuran gambar asli di sisi browser menggunakan JavaScript?
Salinan kode adalah sebagai berikut:
var img = $ ("#img_id"); // Dapatkan img elem saya
var pic_real_width, pic_real_height;
$ ("<img />") // buat dalam salinan memori gambar untuk menghindari masalah CSS
.attr ("src", $ (img) .attr ("src"))
.Load (function () {
pic_real_width = this.width; // Catatan: $ (ini) .width () tidak akan
pic_real_height = this.height; // Bekerja untuk gambar memori.
});
Browser WebKit (Google Chrome, dll.) Hanya dapat memperoleh nilai tinggi dan lebar setelah peristiwa gambar yang dimuat. Jadi, Anda tidak dapat menggunakan fungsi batas waktu untuk menunggu tertunda, cara terbaik adalah dengan menggunakan acara Onload gambar.
Untuk menghindari dampak CSS pada ukuran gambar, kode di atas menyalin gambar ke memori untuk perhitungan.
Jika halaman Anda adalah halaman kuno, Anda dapat menyematkan kode ini di bagian bawah halaman sesuai kebutuhan, dan itu tidak mengharuskan Anda untuk memodifikasi halaman asli.