Atribut height dan width tag <img> HTML
Contoh
Tetapkan lebar dan tinggi gambar menjadi 200 paksi:
<img src="/i/mouse.jpg" height="200" width="200" width="20%"
Definisi dan penggunaan
Tag <img> mengatur ukuran gambar melalui atribut height dan width.
!Mengesahkan atribut height dan width untuk gambar adalah suatu kebiasaan yang baik. Jika atribut ini disetel, ruang untuk gambar dapat disediakan saat halaman dimuat. Jika tidak ada atribut ini, peramban tidak akan mengetahui ukuran gambar, sehingga tidak dapat menyediakan ruang yang sesuai, sehingga saat gambar dimuat, tata letak halaman akan berubah.（Berikut ini adalah penjelasan yang rinci tentang ini）.
!Jangan mengukur ukuran gambar melalui atribut height dan width. Jika mengukur ukuran gambar melalui atribut height dan width untuk perkecilan, pengguna harus mengunduh gambar berukuran besar (meskipun gambar terlihat kecil di halaman). Cara yang benar adalah, sebelum menggunaai gambar di halaman web, gambar harus diproses ke ukuran yang sesuai dengan software.
Bacaan lanjut:Penjelasan tentang atribut height dan width
Contoh lainnya
Mengubah ukuran gambar - Membuat gambar pengisi
Atribut 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 memadai ukuran ruang yang disediakan. Dengan metode ini, dapat dengan mudah membuat gambar mini untuk gambar besar, serta memperbesar gambar yang kecil. Namun, perlu dicatat: peramban masih harus mengunduh file penuh, tidak peduli besarnya ukuran yang akan ditampilkan, dan jika tidak mempertahankan proporsi lebar dan tinggi asli, gambar akan terbelah.
Teknik lain yang dapat digunakan untuk atribut height dan width adalah mempermudah pengisi area halaman, serta memperbaiki kinerja dokumen. Dengan berpikir, jika Anda ingin menempatkan sebuah 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 atribut height dan width untuk menyebarluaskan ukurannya ke ukuran yang lebih besar.
Lihat contoh HTML di bawah ini: width="200px" height="30px" width="20%"
Ini adalah efek HTML di atas, bendera warna ini dibuat dari gambar hanya dengan satu pixel:
Penggunaan nilai persen
Teknik terakhir yang dapat digunakan untuk atribut width adalah penggunaan nilai persen untuk menggantikan nilai absolut pixel. Ini akan membuat peramban mengukur ukuran gambar berdasarkan proporsi dengan jendela tampilan peramban. Jadi, untuk membuat sebuah bendera horizontal berwarna dengan lebar yang sama dengan lebar jendela tampilan dan tinggi 30 pixel, dapat dilakukan seperti ini:
Lihat contoh HTML di bawah ini: width="60%" height="30px" width="20%"
Ketika ukuran jendela dokumen berubah, ukuran gambar ini juga akan berubah:
!Jika nilai width dalam bentuk persen disediakan dan height diabaikan, baik untuk perbesaran maupun perkecilan, peramban akan mempertahankan proporsi lebar dan tinggi gambar. Ini berarti proporsi tinggi dan lebar gambar tidak akan berubah, sehingga gambar tidak akan terbelah.
请看下面的 HTML：
Lihat contoh HTML di bawah ini: <img src="/i/ct_1px.gif" width="20%"
/>
!Artinya, jika hanya mengatur nilai persen width atribut gambar ct_1px.gif, Anda akan mendapatkan gambar persegi (ini karena gambar asli ct_1px.gif adalah persegi dengan lebar dan tinggi 1px):Anda dapat mencoba di alat tes online kamiCoba sendiri
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 yang mengandung elemen. |
Contoh TIY
- Atur ukuran gambar
- Contoh kasus ini menunjukkan bagaimana mengatur ukuran gambar ke berbagai ukuran.
Penjelasan tentang atribut height dan width
Mengapa menggunakan atribut height dan width
Apakah Anda pernah melihat saat dokumen dimuat kontennya menunjukkan gerakan yang tidak teratur? Hal ini terjadi karena peramban mengatur ulang tata letak halaman untuk menampilkan setiap gambar yang dimuat. Peramban mengunduh dan mengurai lebar dan tinggi gambar untuk menentukan ukuran gambar, lalu akan meninggalkan ruang persegi yang sesuai di jendela tampilan. Lalu peramban akan mengatur ulang tata letak tampilan halaman untuk memasukkan gambar ke dalam tampilan. Ini juga memberitahu kami bahwa gambar adalah file yang terpisah, yang diunduh secara terpisah dari file sumbernya.
Tetapi ini bukan cara yang paling efektif untuk menampilkan dokumen, karena peramban harus memeriksa setiap file gambar dan menghitung ruang layar mereka sebelum menampilkan konten berikutnya dan berikutnya. Ini dapat memberikan keterlambatan yang sangat besar bagi penampilan dokumen, sehingga dapat mengganggu pengguna dalam membaca.
Untuk penulis, cara yang lebih efektif adalah melalui atribut height dan width tag <img> untuk menentukan ukuran gambar. Dengan cara ini, peramban sudah menyiapkan tempat untuk gambar sebelum mengunduhnya, sehingga dapat mempercepat penampilan dokumen dan menghindari pergerakan konten dokumen. Kedua atribut ini memerlukan nilai integer dan dieksprinsi dalam satuan piksel untuk ukuran gambar. Urutan munculnya kedua atribut ini di tag <img> tidak penting.
Masalah atribut height dan width
Walaupun atribut height dan width tanda <img> dapat meningkatkan kinerja dan memungkinkan beberapa trik kecil, tetapi ada efek negatif yang membingungkan saat digunakan. Bahkan jika pengguna telah menonaktifkan fitur unduh gambar otomatis, peramban masih akan menampilkan ruang yang disediakan untuk gambar dengan ukuran yang ditentukan. Biasanya ini akan meninggalkan struktur kosong bagi para bacaan, dengan ikon yang tidak berarti yang menunjukkan tempat gambar. Hal ini akan membuat halaman terlihat sangat buruk, seperti belum selesai, dan sebagian besar konten tak berguna. Jika tidak menggunakan ukuran yang ditentukan, peramban hanya akan menempatkan ikon gambar di teks, sehingga setidaknya ada beberapa teks yang dapat dibaca di tampilan.
Untuk masalah ini kami belum memiliki solusi, hanya ingin menekankan bahwa Atribut altdan beberapaTeks deskriptifDengan cara ini, para bacaan setidaknya tahu apa yang kurang di sini. Tetapi kami tetap menyarankan untuk menggunakan properti ukuran ini, karena kami mendorong semua tindakan yang dapat meningkatkan kinerja jaringan.
