Kami tahu bahwa jika tugas membuat thumbnail diserahkan kepada suatu program, efeknya akan jauh lebih baik. Namun, terkadang karena faktor tertentu, seperti server tidak mendukung GD, permintaan CSS untuk melakukannya untuk Anda tidak dapat dihindari.
Untuk memperkecil gambar besar ke ukuran tertentu, pada browser modern, cukup gunakan properti CSS max-width dan max-height.
Untuk IE 6.0 dan di bawahnya, dua properti CSS di atas akan diabaikan. Untuk mengatasi hal semacam ini sebelumnya, kami sering menggunakan Javascript dan kemudian menambahkan peristiwa onload ke gambar. Misalnya:
<imgsrc="..."alt="..."onload="resizeImage(ini)"/>
<scripttype="teks/javascript">
fungsi mengubah ukuran Gambar(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
</skrip>
Hal ini tentu saja dapat menyelesaikan masalah, namun akan menimbulkan masalah saat memperbarui laman berikutnya - karena browser meningkatkan dukungannya terhadap CSS, cepat atau lambat kami akan menghapus semua peristiwa onload dari gambar. Ini Waktu Pertunjukan Ekspresi. Karena IE mendukung penempatan beberapa skrip di CSS melalui Ekspresi, dan skrip ini hanya tersedia untuk IE 6.0 dan di bawahnya, sangat cocok untuk menuliskannya ke dalam Ekspresi.
Terakhir, untuk memperkecil gambar besar menjadi 50px*50px, Anda dapat merujuk ke CSS berikut:
.gambar jempol{
lebar maksimal:50px;
tinggi maksimal:50 piksel;
}
*html.gambar jempol{
lebar:ekspresi(ini.lebar>50&&ini.lebar>ini.tinggi?50:otomatis);
tinggi:ekspresi(ini.tinggi>50?50:otomatis);
}
