HTML 标签 <img> 的 height 和 width 属性
定义和用法
标签 <img> 的属性 height 和 width 设置图像的大小。
Petunjuk:Mengesahkan properti height dan width untuk gambar adalah suatu kebiasaan yang baik. Jika properti ini disetel, dapat mempertahankan ruang untuk gambar saat halaman dimuat. Jika tidak ada properti ini, peramban tidak akan tahu ukuran gambar, sehingga tidak dapat mempertahankan ruang yang sesuai, sehingga ketika gambar dimuat, tata letak halaman akan berubah.（Berikut ini menjelaskan pendapat ini dalam detail）.
Petunjuk:Jangan mengukur ukuran gambar melalui properti height dan width. Jika mengukur ukuran gambar melalui properti height dan width untuk memperkecil, pengguna harus mengunduh gambar berukuran besar (meskipun gambar terlihat kecil di halaman). Cara yang benar adalah, sebelum menggunaai gambar di halaman web, harus memproses ukuran gambar melalui software sehingga sesuai ukuran.
Bacaan lanjut:Pengertian lengkap tentang atribut height dan width
Contoh lainnya
Mengubah ukuran gambar - Membuat gambar pengisi
Properti 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 gambar, sehingga ia dapat menyesuaikan ukuran ruang yang disediakan. Dengan metode ini, dapat dengan mudah membuat miniature gambar besar, serta memperbesar gambar kecil. Namun, perlu dicatat bahwa peramban masih harus mengunduh seluruh berkas, tanpa menghiraukan ukuran yang akan ditampilkan akhirnya, dan jika tidak mempertahankan proporsi lebar dan tinggi asli, gambar akan mengalami penyimpangan.
Satu teknik lain yang dapat digunakan untuk properti height dan width adalah untuk memudahkan pengisi area halaman, serta memperbaiki performa dokumen. Bayangkan jika Anda ingin menempatkan bendera warna di dalam dokumen. Anda tidak perlu membuat gambar dengan ukuran penuh, sebaliknya, Anda hanya harus membuat gambar dengan lebar dan tinggi 1 pixel, dan memberikan warna yang Anda inginkan. kemudian gunakan properti height dan width untuk mengekskansinya ke ukuran yang lebih besar.
<img src="/i/ct_1px.gif" width="200px" height="30px" />
Ini adalah efek HTML di atas, bendera warna ini dibuat dari gambar yang hanya memiliki satu pixel:
Penggunaan nilai persen
Teknik terakhir yang digunakan untuk properti width adalah untuk menggunakan nilai persen untuk menggantikan nilai pixel absolut. Ini akan membuat peramban mengukur skala gambar menurut proporsi jendela tampilan. Jadi, jika ingin membuat bendera horizontal berwarna yang lebar sama dengan lebar tampilan dan tinggi 30 pixel, hal ini dapat dicapai seperti ini:
<img src="/i/ct_1px.gif" width="60%" height="30px" />
Ketika ukuran jendela dokumen berubah, ukuran gambar ini juga akan berubah:
Petunjuk:Jika nilai lebar dalam bentuk persen disediakan dan tinggi disetingkan, maka baik untuk memperbesar atau memperkecil, peramban akan mempertahankan proporsi lebar dan tinggi gambar. Ini berarti proporsi tinggi dan lebar gambar akan tetap tetap, dan gambar tidak akan mengalami penyimpangan.
Lihat HTML di bawah ini:
<img src="/i/ct_1px.gif" width="20%" />
Artinya, jika hanya mengatur nilai persen untuk atribut width gambar ct_1px.gif, maka akan mendapatkan gambar persegi (karena gambar asli ct_1px.gif adalah persegi dengan lebar dan tinggi 1px):
Petunjuk:Anda dapat mencoba di alat tes online kamiCoba sendiri!
Petunjuk:Tujuannya adalah untuk membuat Anda memahami penggunaan atribut height dan width dengan lebih baik. Jika Anda hanya memerlukan area warna tunggal yang luas untuk menghias halaman, cara yang lebih baik adalahMenggunakan CSS untuk membuat warna latar。
Dukungan peramban
Semua peramban mendukung atribut height dan width.
Sintaks
<img height="value" />
atau:
<img width="value" />
Nilai atribut
| Nilai | Deskripsi |
|---|---|
| pixels | Nilai tinggi atau lebar dalam satuan piksel. |
| percent | Nilai tinggi atau lebar dalam persen dari elemen yang disertakan. |
TIY Contoh
- Atur ukuran gambar
- Contoh ini menunjukkan bagaimana mengatur ukuran gambar ke berbagai ukuran.
Pengertian lengkap tentang atribut height dan width
Mengapa untuk menggunakan atribut height dan width
Apakah anda pernah melihat ketika dokumen dimuat, kontennya akan bergerak secara irregular? Hal ini terjadi karena peramban terus mengatur tata letak halaman untuk menampilkan setiap gambar yang dimuat. Peramban mengunduh dan memproses lebar dan tinggi gambar untuk menentukan ukuran gambar, kemudian akan meninggalkan ruang persegi yang sesuai di jendela pertunjukan. kemudian peramban akan mengatur tata letak tampilan halaman untuk memasukkan gambar ke dalam pertunjukan. Ini juga mengatakan kepada kami bahwa gambar adalah file yang terpisah, yang diunduh secara terpisah dari file asli.
Tetapi ini bukan cara yang paling efektif untuk menampilkan dokumen, karena peramban harus memeriksa setiap file gambar dan menghitung ruang layar sebelum menampilkan konten berikutnya dan berikutnya di dokumen. Ini dapat menyebabkan penundaan yang sangat besar dalam pertunjukan dokumen, sehingga dapat mengganggu pembacaan pengguna.
Untuk penulis, cara yang lebih efektif adalah melalui penggunaan atribut height dan width di tag <img> untuk menentukan ukuran gambar. Dengan cara ini, peramban sudah menyiapkan tempat untuk gambar sebelum mengunduhnya, sehingga dapat mempercepat pertunjukan dokumen dan menghindari pergerakan konten dokumen. Kedua atribut ini memerlukan nilai integer dan diungkapkan dalam satuan piksel untuk menentukan ukuran gambar. Urutan kedua atribut di tag <img> tidak penting.
Masalah sifat height dan width
Walaupun sifat height dan width tanda <img> dapat meningkatkan performa dan memungkinkan beberapa trik kecil, tetapi ada beberapa kesan negatif yang rumit saat digunakan. Bahkan jika pengguna telah matikan fungsi muat semula imej secara otomatis, pelayar masih akan menunjukkan ruang yang disediakan untuk imej dalam saiz yang ditentukan. Biasanya ini meninggalkan pengguna dengan kerangka kosong, dengan ikon yang tak berarti, yang menandakan tempatimej disana. Pada saat ini, halaman akan terlihat sangat buruk, seperti belum selesai, dan sebagian besar kandungan adalah tak berguna. Jika tidak digunakan saiz yang ditentukan, pelayar hanya akan meletakkan ikon imej di teks, sehingga paling sedikit ada teks yang dapat dibaca.
Untuk masalah ini kami belum ada solusi, hanya ingin menekankan bahwa untuk menggunakan sifat altdan beberapaTeks deskriptifDengan cara ini, pembaca setidaknya tahu apa yang kurang disini. Kita masih menyarankan untuk menggunakan properti ukuran ini, karena kita mendorong semua tindakan yang dapat meningkatkan kinerja jaringan.
