HTML <img> properti lebar
definisi dan penggunaan
width properti yang menentukan lebar gambar, dalam satuan piksel.
Petunjuk:tunjuk height dan width properti adalah kebiasaan yang bagus. jika mengatur properti ini, dapat menyediakan ruang untuk gambar saat halaman diMuat. jika tidak ada properti ini, peramban tidak dapat mengetahui ukuran gambar, sehingga tidak dapat menyediakan ruang yang sesuai untuk gambar, sehingga ketika gambar dimuat, tata letak halaman akan berubah. (berikut ini menjelaskan detil tentang pendapat ini).
Petunjuk:tidak boleh melalui height dan width properti untuk menggandakan gambar. jika melalui height dan width Properti untuk memperkecil gambar, pengguna harus mengunduh gambar dengan kapasitas besar (meskipun gambar terlihat kecil di halaman). cara yang benar adalah, sebelum menggunakan gambar di halaman web, harus diolah ukuran gambar yang sesuai dengan software.
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
SyaratDeskripsi<img width="
">
| Nilai attribute | Nilai |
|---|---|
| Deskripsi | pixels |
Tentukan lebar gambar dalam satuan pixel (contoh width="100").
Contoh lain
Mengubah ukuran gambar - Membuat gambar pengisi
Attribute height dan width memiliki sifat yang disembunyikan, yaitu orang tidak perlu menentukan ukuran asli gambar, artinya nilai ini dapat lebih besar atau lebih kecil daripada ukuran asli. Layar web akan otomatis menyesuaikan ukuran gambar, sehingga sesuai dengan ukuran ruang yang disediakan. Metode ini dapat digunakan untuk mem Buat thumbnail gambar besar dengan mudah, serta memperbesar gambar kecil. Namun, perlu dicatat: layar web masih harus mengunduh file penuh, tanpa mengira ukuran yang akan ditampilkan akhirnya, dan jika tidak mempertahankan proporsi lebar dan tinggi asli, gambar akan tergeser.
<img src="/i/ct_1px.gif"} width="200px" height="30px" >
Ini adalah efek HTML di atas, bingkai warna ini dibuat dari gambar hanya dengan satu pixel:
Penggunaan nilai persen
Teknik terakhir yang dapat digunakan untuk attribute width adalah untuk menggunakan nilai persen untuk menggantikan nilai absolut pixel. Ini akan membuat layar web mengukur skala gambar menurut proporsi jendela tampilan. Jadi, jika ingin membuat bingkai warna yang lebar sama dengan lebar jendela tampilan dan tinggi 30 pixel, hal ini dapat dilakukan:
<img src="/i/ct_1px.gif"} width="60%" height="30px" >
Kapan ukuran jendela dokumen berubah, ukuran gambar ini juga akan berubah:
Petunjuk:Jika disediakan nilai width dalam bentuk persen dan height diabaikan, layar web akan mempertahankan proporsi lebar dan tinggi gambar, baik saat di Besar atau kecil. Ini berarti proporsi tinggi dan lebar gambar tidak akan berubah, sehingga gambar tidak akan tergeser.
Lihat HTML di bawah ini:
<img src="/i/ct_1px.gif"} width="20%" >
Artinya, jika hanya menetapkan persenasingan atribut width untuk gambar ct_1px.gif, Anda akan mendapatkan gambar persegi (ini karena ct_1px.gif aslinya adalah persegi dengan lebar dan tinggi 1px):
Petunjuk:Tujuannya adalah untuk mempermudah pemahaman Anda tentang penggunaan atribut height dan width. Jika Anda hanya memerlukan blok warna tunggal yang luas untuk menghias halaman, cara yang lebih baik adalahMenggunakan CSS untuk membuat warna latar.
Pengertian lengkap atribut height dan width
Alasan untuk menggunakan atribut height dan width
Apakah Anda pernah melihat saat dokumen dimuat kontennya yang menunjukkan gerakan yang tidak teratur? Hal ini terjadi karena peramban secara berulang-ulang mengatur tata letak halaman untuk dapat menampilkan setiap gambar yang dimuat. Peramban mengunduh dan mengurai lebar dan tinggi gambar untuk menentukan ukuran gambar, lalu akan menempatkan ruang persegi yang sesuai di dalam jendela tampilan. Lalu peramban akan mengatur tata letak tampilan halaman untuk menempatkan gambar ke dalam tampilan. Ini juga mengatakan bahwa gambar adalah file yang terpisah, yang disiapkan untuk dimuat secara terpisah dari file asal.
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 yang berikutnya dan mendahului dokumen. Ini dapat menyebabkan keterlambatan yang sangat besar dalam pereaksi halaman, sehingga mengganggu pembacaan pengguna.
Untuk para kreator, cara yang lebih efektif adalah melalui atribut height dan width tag <img> untuk menentukan ukuran gambar. Dengan cara ini, peramban menyiapkan tempat untuk gambar sebelum mengunduh gambar, sehingga dapat mempercepat pereaksi halaman dan menghindari pergerakan konten dokumen. Kedua atribut ini memerlukan nilai integer dan diungkapkan dalam satuan piksel untuk ukuran gambar. Urutan munculnya kedua atribut ini di dalam tag <img> tidak penting.
Masalah atribut height dan width
Walaupun atribut height dan width dari tag <img> dapat memperbaiki kinerja dan memungkinkan Anda melaksanakan beberapa teknik kecil, tetapi masih ada efek negatif yang sulit saat digunakan. Bahkan jika pengguna telah menonaktifkan fitur unduh otomatis gambar, peramban masih akan menampilkan ruang yang disediakan untuk gambar dalam ukuran yang ditentukan. Biasanya ini meninggalkan struktur kosong bagi pembaca, dengan ikon yang tidak berarti yang menunjukkan tempat gambar disana. 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 dalam teks, sehingga ada sedikit teks yang dapat dibaca setidaknya.
Untuk masalah ini kami belum memiliki solusi, hanya ingin menekankan bahwa gunakan atribut alt danTeks deskriptifDengan cara ini, para bacaan setidaknya tahu apa yang kurang di sini. Tetapi kami tetap menyarankan untuk menggunakan atribut ukuran ini, karena kami mendorong semua tindakan yang dapat memperbaiki kinerja jaringan.
Dukungan Peramban
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Dukungan | Dukungan | Dukungan | Dukungan | Dukungan |
