Atribut tinggi <img> HTML

Tanda <img> HTML

Definisi dan penggunaan

tinggi Atribut yang menentukan tinggi gambar dalam satuan piksel.

Petunjuk:Selalu tentukan untuk gambar tinggi dan Atribut lebarJika tinggi dan lebar telah diatur, ruang yang diperlukan untuk gambar akan disediakan saat halaman dimuat. Sebaliknya, jika atribut ini tidak ada, peramban tidak tahu ukuran gambar dan tidak dapat menyediakan ruang yang sesuai. Ini akan menyebabkan tata letak halaman berubah selama pemuatan (ketika gambar dimuat).

Petunjuk:gunakan tinggi dan lebar 属性缩小大型图像会强制用户下载大型图像（即使在页面上看起来很小）。为避免这种情况，在将图像用于页面之前，请使用图像处理软件重新调整其尺寸。

Attribute pengurangan ukuran gambar besar akan memaksa pengguna untuk mengunduh gambar besar (meskipun gambar terlihat kecil di halaman). Untuk menghindari hal ini, gunakan software pengolahan gambar untuk mengatur ulang ukuran gambar sebelum digunakan di halaman.Explain atribut height dan width

Bacaan Lanjutan:

Contoh

Gambar dengan tinggi 600 pixel dan lebar 500 pixel:

Coba sendiri

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

GrammarDeskripsi<img height="

">

Nilai Attribute Nilai
Deskripsi pixels

Tentukan tinggi gambar dalam pixel (contoh height="100").

Contoh Lebih Banyak

Mengubah ukuran gambar - Membuat gambar pengisi

Salah satu karakteristik tersembunyi dari attribute height dan width adalah, orang tidak perlu menentukan ukuran asli gambar, artinya, kedua nilai ini dapat lebih besar atau lebih kecil daripada ukuran asli. Peramban akan mengatur otomatis gambar, sehingga ia dapat menyesuaikan diri dengan ukuran ruang yang disediakan. Dengan metode ini, dapat dengan mudah membuat miniatur gambar untuk gambar besar, serta memperbesar gambar yang kecil. Namun, perlu dicatat: peramban masih harus mengunduh file penuh, baik ukurannya akhirnya berapa besar, dan jika tidak mempertahankan proporsi lebar dan tinggi asli, gambar akan terbulin.

<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 dapat digunakan untuk attribute width adalah penggunaan nilai persen untuk menggantikan nilai absolut pixel. Ini akan membuat peramban menggandakan gambar berdasarkan proporsi dengan jendela tampilan. Jadi, jika ingin membuat bendera berwarna yang lebar sama dengan lebar jendela tampilan dan tinggi 30 pixel, dapat dilakukan seperti ini:

<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, baik yang diperbesar atau diperkecil, peramban akan mempertahankan proporsi lebar dan tinggi gambar. Artinya, proporsi tinggi dan lebar gambar tidak akan berubah, sehingga gambar tidak akan terbulin.

Lihat HTML di bawah ini:

<img src="/i/ct_1px.gif"} width="20%" >

Artinya, jika hanya menetapkan nilai persen untuk atribut width gambar ct_1px.gif, Anda akan mendapatkan gambar persegi (ini disebabkan karena ct_1px.gif adalah file persegi dengan lebar dan tinggi 1px):


Coba sendiri

Petunjuk:Tujuannya adalah untuk membuat Anda memahami penggunaan atribut height dan width. Jika Anda hanya memerlukan area warna yang luas untuk menghias halaman, cara yang lebih baik adalahMenggunakan CSS untuk membuat warna latar.

Explain atribut height dan width

Alasan untuk menggunakan atribut height dan width

Apakah Anda pernah melihat konten dokumen yang terload akan bergerak secara不规则? Hal ini terjadi karena peramban terus mengatur tata letak halaman untuk menampilkan setiap gambar yang dimuat. Peramban mengunduh dan mengurai lebar dan tinggi gambar untuk menentukan ukuran gambar, kemudian meninggalkan ruang persegi yang sesuai di jendela tampilan. kemudian peramban akan mengatur tata letak tampilan halaman untuk memasukkan gambar ke dalam tampilan. Ini juga mengatakan kepada kami bahwa gambar adalah file yang terpisah, yang diunduh secara terpisah dari file asal.

Tetapi ini bukan metode yang paling efektif untuk menampilkan dokumen, karena peramban harus memeriksa setiap file gambar dan menghitung ruang layar sebelum menampilkan konten berikutnya dan setelahnya. Ini dapat memberikan penundaan yang sangat besar bagi tampilan dokumen, sehingga mengganggu pengguna saat membaca.

Untuk kreator, metode yang lebih efektif adalah untuk menentukan ukuran gambar melalui atribut height dan width <img>. Dengan cara ini, peramban sudah menyiapkan tempat untuk gambar sebelum mengunduh gambar, sehingga dapat mempercepat tampilan dokumen dan menghindari gerakan konten dokumen. Kedua atribut ini memerlukan nilai integer dan dieksprimen dalam satuan piksel untuk ukuran gambar. Urutan penampilan kedua atribut ini dalam tag <img> tak penting.

Masalah atribut height dan width

Meskipun atribut height dan width <img> dapat memperbaiki kinerja dan memungkinkan Anda melaksanakan teknik kecil, tetapi ada efek negatif yang berat saat digunakan. Bahkan jika pengguna telah menonaktifkan fitur pemberitahuan unduhan gambar otomatis, peramban masih akan menampilkan ruang yang disediakan untuk gambar dengan ukuran yang ditentukan. Biasanya ini meninggalkan struktur kosong untuk pembaca, dengan ikon yang tak berarti yang menunjukkan tempat gambar. Hal ini 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 setidaknya ada beberapa teks yang dapat dibaca.

Untuk masalah ini kami belum memiliki solusi, hanya ingin menekankan satu hal, yaitu untuk menggunakan properti alt danTeks deskriptifDengan cara ini, para pembaca setidaknya tahu apa yang hilang di sini. Tetapi kami tetap menyarankan untuk menggunakan properti ukuran ini, karena kami mendorong semua kegiatan yang dapat meningkatkan kinerja jaringan.

Dukungan Peramban

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan

Tanda <img> HTML