Kami (terutama pemula seperti saya) sering menemui masalah adaptasi gambar. Masalah ini sangat umum terjadi. Di area artikel dan forum, dapat dikatakan bahwa di mana pun gambar perlu diunggah, masalah ini selalu ada, dan orang-orang menanyakannya dari waktu ke waktu di forum. Mengapa? Alasannya sederhana, kami tidak dapat mengharuskan editor web atau anggota forum Anda untuk dapat memotong gambar atau memahami kode html paling dasar - meskipun ini tidak memiliki banyak konten teknis.
Solusi sebelumnya sebagian besar diimplementasikan menggunakan js, tetapi siapa pun yang pernah menggunakannya tahu bahwa metode ini agak rumit. Cara lain adalah dengan mendefinisikan over-flow:hidden dalam wadah eksternal. Namun cara ini hanya akan memotong gambar dan tidak akan diterapkan secara otomatis.
Munculnya metode berikut ini patut disyukuri oleh CSS2.0 yang hebat dan bahkan Microsoft yang lebih hebat (tanpanya, tidak perlu memiliki kode yang panjang lebar ^_^). Saya baru lulus tes pada ie6.0, ff1.5, opera7.0 di bawah winXP. Saya berharap dapat menggunakan artikel ini untuk menginspirasi orang lain dan berharap lebih banyak ahli yang dapat memberikan panduan. Kuncinya adalah: max-width:780px; dan garis di bawahnya.
Memperbaiki adaptasi piksel:
Jalankan kotak kode
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <meta http-equiv=Jenis Konten content=text/html; /> <title>css2.0 VS yaitu</title> <style type=text/css> <!-- body { ukuran font: 12 piksel; perataan teks: tengah; margin: 0 piksel; gambar{ margin:0 otomatis; lebar:800px; bantalan:0; batas:1px padat #333; lebar:ekspresi(document.body.clientWidth > 780? 780px: auto ); batas:1px putus-putus #000; } --> </style> </head> <body> <div id=pic> <img src=http ://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=Terima kasih kepada blueidea untuk gambar hotlinknya! /> </div> </tubuh> </html>
[Ctrl+A Pilih Semua Tip: Anda dapat memodifikasi sebagian kode terlebih dahulu lalu tekan Jalankan]
Persentase adaptasi:
Jalankan kotak kode
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <meta http-equiv=Jenis Konten content=text/html; /> <title>css2.0 VS yaitu</title> <style type=text/css> <!-- body { ukuran font: 12px; perataan teks: margin: 0; gambar{ margin:0 otomatis; lebar:90%; bantalan:0; batas:1px padat #333; lebar:ekspresi(document.body.clientWidth>document.getElementById(pic).scrollWidth*8/10? 80%: auto ); border:1px putus-putus #000; > <div id=gambar> <img src=http://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=Terima kasih blueidea untuk gambar hotlinknya! /> </div> </tubuh> </html>
[Ctrl+A Pilih Semua Tip: Anda dapat memodifikasi sebagian kode terlebih dahulu lalu tekan Jalankan]
mengingatkan:
1 Metode ini bukan hanya untuk img;
2 lebar maks, tinggi maks, lebar minimum, tinggi minimum.
Pengantar penggunaan ekspresi dalam CSSPenulis: dozb
definisi
IE5 dan versi yang lebih baru mendukung penggunaan ekspresi dalam CSS untuk mengaitkan properti CSS dengan ekspresi Javascript. Properti CSS di sini dapat berupa properti bawaan elemen atau properti khusus. Artinya, atribut CSS dapat diikuti oleh ekspresi Javascript, dan nilai atribut CSS sama dengan hasil perhitungan ekspresi Javascript. Anda bisa langsung mereferensikan properti dan metode elemen itu sendiri dalam ekspresi, atau menggunakan objek browser lainnya. Ekspresinya seolah-olah berada dalam fungsi anggota elemen ini.
Tetapkan nilai pada atribut intrinsik elemen
Misalnya, Anda dapat memposisikan elemen berdasarkan ukuran browser.
#Div Saya {
posisi: mutlak;
lebar: 100 piksel;
tinggi: 100 piksel;
kiri: ekspresi(document.body.offsetWidth - 110 + px);
atas: ekspresi(document.body.offsetHeight - 110 + px);
latar belakang: merah;
}
Tetapkan nilai ke atribut khusus elemen
Misalnya, hilangkan kotak putus-putus untuk link pada halaman.
Pendekatan yang biasa dilakukan adalah:
<a href=link1.htm onfocus=this.blur()>link1</a>
<a href=link2.htm onfocus=this.blur()>link2</a>
<a href=link3.htm onfocus=this.blur()>link3</a>
Sekilas keuntungan menggunakan ekspresi mungkin tidak terlihat, namun jika ada puluhan bahkan ratusan link di halaman Anda, apakah Anda tetap akan menggunakan Ctrl+C dan Ctrl+V secara mekanis, apalagi keduanya? menghasilkan lebih banyak kode yang berlebihan?
Cara menggunakan ekspresi adalah sebagai berikut:
<tipe gaya=teks/css>
a {bintang : ekspresi(onfocus=ini.blur)}
</gaya>
<a href=link1.htm>tautan1</a>
<a href=link2.htm>tautan2</a>
<a href=link3.htm>tautan3</a>
menjelaskan:
Bintang di dalamnya adalah atribut yang Anda definisikan sendiri, maka pernyataan yang terkandung dalam ekspresi () adalah skrip JS. Jangan lupa untuk memberi tanda kutip di antara atribut khusus dan ekspresi, karena pada dasarnya Itu masih CSS, jadi ditempatkan di tag style, bukan di script. Oke, jadi mudah untuk menghilangkan kotak link putus-putus di halaman dalam satu kalimat. Namun jangan berpuas diri. Jika efek khusus yang dipicu adalah perubahan atribut CSS, hasilnya akan berbeda dari niat awal Anda. Misalnya, jika Anda ingin mengubah warna kotak teks pada halaman saat mouse bergerak masuk dan keluar, Anda mungkin berpikir bahwa itu harus ditulis sebagai
/* Teks aslinya kacau, saya tidak punya waktu untuk memperbaikinya, maaf!*/
Namun hasilnya adalah script error. Cara penulisannya yang benar adalah dengan menuliskan definisi style CSS ke dalam fungsinya, seperti gambar di bawah ini:
<tipe gaya=teks/css>
masukan {bintang : ekspresi(onmouseover=function()
{ini.style.backgroundColor=#FF0000},
onmouseout=function(){ini.gaya.backgroundColor=#FFFFFF}) }
</gaya>
<tipe masukan=teks>
<tipe masukan=teks>
<tipe masukan=teks>
Melihat:
Hal ini tidak terlalu diperlukan. Umumnya tidak disarankan untuk menggunakan ekspresi karena ekspresi memerlukan sumber daya browser yang relatif tinggi.