HTML <img> width 属性
Definisi dan penggunaan
width aturan untuk menentukan lebar imej, dalam satuan piksel.
Petikan:Tetapkan height dan width aturan adalah kebiasaan yang baik. Jika diatur, ruang boleh disediakan untuk imej semasa halaman dimuatkan. Jika tiada aturan ini, pelayar tidak dapat mengenal saiz imej, dan tidak dapat mempertahankan ruang yang sesuai, jadi bentangan halaman akan berubah sewaktu imej dimuatkan (pembahasan lanjut akan menggambarkan pandangan ini).
Petikan:Jangan gunakan height dan width aturan untuk mengukur imej. Jika melalui height dan width Untuk mengurangkan imej, pengguna mesti muat turun imej yang berukuran besar (walaupun imej kelihatan kecil di halaman). Cara yang betul adalah, sebelum imej digunakan di halaman web, imej seharusnya dihaluskan ke saiz yang sesuai dengan perisian.
Baca lanjut:Penjelasan properti height dan width
Contoh
Gambar tinggi 600 pixel dan lebar 500 pixel:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Sintaks
<img width="pixels">
Nilai attribute
| Nilai | Deskripsi |
|---|---|
| pixels | Tentukan lebar gambar dalam satuan pixel (contoh width="100"). |
Beberapa contoh lain
Mengubah ukuran gambar - Membuat gambar pengisi
Attribute height dan width memiliki sifat tersembunyi, yaitu orang tidak perlu menentukan ukuran asli gambar, yang artinya, kedua nilai ini dapat lebih besar atau lebih kecil daripada ukuran asli. Peramban akan otomatis menyesuaikan ukuran gambar untuk menyesuaikan dengan ukuran ruang yang disediakan. Dengan metode ini, dapat dengan mudah membuat miniatur gambar untuk gambar besar, serta memperbesar gambar kecil. Namun, perlu dicatat: peramban masih harus mengunduh seluruh berkas, tidak peduli ukuran yang akan ditampilkan akhirnya, dan jika tidak mempertahankan proporsi lebar dan tinggi asli, gambar akan mengalami gangguan.
Salah satu kelebihan attribute height dan width adalah dapat memenuhi area halaman dengan sangat mudah, serta memperbaiki performa dokumen. Dengan contoh, jika ingin menempatkan garis warna di dalam dokumen. Anda tidak perlu membuat gambar dengan ukuran penuh, sebaliknya, hanya buat gambar dengan lebar dan tinggi 1 pixel dan berikan warna yang diinginkan. kemudian gunakan attribute height dan width untuk mengeksankan ukurannya ke ukuran yang lebih besar.
<img src="/i/ct_1px.gif"} width="200px" height="30px" />
Ini adalah efek HTML di atas, garis warna ini dibuat dari gambar hanya dengan satu pixel:
Gunakan nilai persen
Teknik terakhir yang dapat digunakan untuk attribute width adalah untuk menggunakan nilai persen untuk menggantikan nilai absolut pixel. Ini akan membuat peramban mengukur skala gambar menurut proporsi jendela tampilan. Jadi, jika ingin membuat garis horizontal berwarna yang lebar sama dengan lebar jendela tampilan dan tinggi 30 pixel, dapat seperti ini:
<img src="/i/ct_1px.gif"} width="60%" height="30px" />
Kapan ukuran jendela dokumen berubah, ukuran gambar ini juga akan berubah:
Petikan:Jika diberikan nilai lebar dalam bentuk persen dan mengabaikan tinggi, maka baik untuk memperbesar maupun memperkecil, peramban akan mempertahankan proporsi lebar dan tinggi gambar. Ini berarti proporsi tinggi dan lebar gambar tidak akan berubah, sehingga gambar tidak akan mengalami gangguan.
Lihat HTML di bawah ini:
<img src="/i/ct_1px.gif"} width="20%" />
Arti kata lainnya adalah, jika hanya menetapkan persenagih properti width imej ct_1px.gif, anda akan mendapatkan imej persegi (ini kerana ct_1px.gif asal adalah persegi dengan lebar dan tinggi 1px):
Petikan:Tujuannya adalah untuk membuat anda mengerti penggunaan properti height dan width dengan contoh di atas. Jika anda hanya memerlukan blok warna tunggal yang luas untuk hiasan halaman, cara yang lebih baik adalahGunakan CSS untuk mencipta warna latar.
Penjelasan properti height dan width
Mengapa hendak gunakan properti height dan width
Apakah anda pernah lihat kandungan dokumen yang dimuat turun akan bergerak secara irregular? Ini kerana pelayar terus mengatur susun atur halaman untuk memaparkan setiap imej yang dimuat turun, untuk menentukan saiz imej dengan mengambil lebar dan tingginya imej, kemudian akan memaparkan ruang persegi yang sepadan di dalam kaca tampilan. kemudian pelayar akan mengatur susun atur paparan halaman untuk memasukkan imej ke dalam paparan. Ini juga memberitahu kami bahawa imej adalah fail yang bebas, dan mereka dimuat turun secara bebas dengan fail asal.
Tetapi ini bukan cara yang paling efektif untuk memaparkan dokumen, kerana pelayar mesti memeriksa setiap fail imej dan mengira ruang skrin mereka sebelum memaparkan kandungan berikutnya dan belakang dokumen. Ini boleh memberikan kelewatan besar bagi paparan dokumen, dan boleh mengganggu pembacaan pengguna.
Untuk penulis, cara yang lebih efektif adalah melalui properti height dan width <img> tag untuk tentukan saiz imej. Dengan cara ini, pelayar akan memaparkan ruang untuk imej sebelum muat turun imej, sehingga boleh mempercepat paparan dokumen, serta mengelakkan penggerakan kandungan dokumen. Kedua properti ini memerlukan nilai integer dan diwakili dalam satuan piksel untuk saiz imej. Urutan kedudukan kedua properti ini dalam tag <img> adalah tak penting.
Masalah properti height dan width
Walaupun properti height dan width <img> tag boleh memperbaiki prestasi dan membolehkan anda mencuba teknik kecil, tetapi ada kesan negatif yang sukar untuk digunakan dalam penggunaannya. Meskipun pengguna telah matikan fungsi muat turun imej automatik, pelayar masih akan memaparkan ruang yang disediakan untuk imej dalam saiz yang ditentukan. Biasanya ini akan meninggalkan pengguna dengan kerangka kosong, dengan ikon yang tak berarti untuk menandakan tempat imej ini. Ini akan membuat halaman kelihatannya sangat buruk, seperti belum selesai, dan sebagian besar kandungan tidak berguna. Jika tidak digunakan saiz yang ditentukan, pelayar hanya akan meletakkan ikon imej di teks, sekurang-kurangnya ada beberapa teks yang boleh baca dalam paparan ini.
对于这个问题我们还没有解决方案，只能强调一点，就是去使用 alt 属性 和一些描述性文字，这样读者至少知道这里缺少的是什么东西。我们还是建议您使用这些尺寸属性，因为我们鼓励一切能够改善网络性能的行为。
浏览器支持
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 支持 | 支持 | 支持 | 支持 | 支持 |
