Atribut tinggi <img> HTML

Tanda <img> HTML

Definisi dan penggunaan

tinggi Atribut yang menentukan tinggi gambar dalam satuan piksel.

Petunjuk:Selalu tentukan tinggi dan Atribut lebar。Jika tinggi dan lebar telah diset, ruang yang diperlukan untuk gambar akan disediakan saat halaman dimuat. Jika tidak ada properti ini, peramban tidak tahu ukuran gambar, sehingga tidak dapat menyiapkan ruang yang sesuai. Ini akan menyebabkan tata letak halaman berubah selama dimuat (saat gambar dimuat).

Petunjuk:gunakan tinggi dan lebar Mengurangi ukuran gambar besar akan memaksa pengguna untuk mengunduh gambar besar (meskipun gambar ini terlihat kecil di halaman). Untuk menghindari hal ini, gunakan software pengolahan gambar untuk mengatur ulang ukuran gambar sebelum menggunakannya di halaman.

Baca Lebih Lanjut:Penjelasan properti height dan width

Contoh

Gambar dengan tinggi 600 pixel dan lebar 500 pixel:

<img src="img_girl.jpg" alt="Gadis dalam jaket" width="500" height="600">

Coba sendiri

Sintaks

<img height="pixels">

Nilai Atribut

Nilai Deskripsi
pixels Tentukan tinggi gambar dalam satuan pixel (contoh height="100").

Contoh Lebih Banyak

Mengubah ukuran gambar - Membuat gambar pengisi

Atribut height dan width memiliki sifat tersembunyi, yaitu orang tidak perlu menentukan ukuran asli gambar, yaitu 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 gambar mini untuk gambar besar, serta memperbesar gambar kecil. Namun, perlu dicatat: peramban masih harus mengunduh file yang penuh, bahkan jika ukuran yang akhirnya ditampilkan kecil, dan jika tidak mempertahankan proporsi lebar dan tinggi aslinya, gambar akan berlekuk.

Teknik lain yang dapat digunakan untuk atribut height dan width adalah untuk memenuhi area halaman dengan sangat mudah, serta memperbaiki kinerja dokumen. Dengan contoh, jika ingin menempatkan garis warna di dalam dokumen, Anda tidak perlu membuat gambar dengan ukuran penuh, sebaliknya, Anda hanya perlu membuat gambar dengan lebar dan tinggi 1 pixel, dan memberikan warna yang Anda inginkan. kemudian gunakan atribut 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 yang hanya memiliki satu pixel:

Penggunaan nilai persen

Teknik terakhir yang dapat digunakan untuk atribut width adalah untuk menggunakan nilai persen untuk menggantikan nilai pixel yang absolut. Ini akan membuat peramban mengukur ukuran gambar berdasarkan proporsi dengan jendela tampilan peramban. Jadi, jika ingin membuat garis tinggi 30 pixel yang sama lebar dengan lebar jendela tampilan, hal ini dapat dicapai seperti berikut:

<img src="/i/ct_1px.gif"} width="60%" height="30px" />

Ketika ukuran jendela dokumen berubah, ukuran gambar ini juga akan berubah:

Petunjuk:Jika dijanjikan nilai lebar dalam bentuk persen dan mengabaikan tinggi, maka baik yang diperbesar atau diperkecil, peramban akan mempertahankan proporsi lebar dan tinggi gambar. Ini berarti proporsi tinggi dan lebar gambar tidak akan berubah, sehingga gambar tidak akan berlekuk.

Lihat HTML di bawah ini:

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

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


Coba sendiri

Petunjuk:Tujuannya adalah untuk memungkinkan Anda memahami penggunaan properti height dan width dengan contoh yang disediakan. Jika Anda hanya memerlukan area warna tunggal yang luas untuk hiasan halaman, cara yang lebih baik adalahMenggunakan CSS untuk membuat warna latar.

Penjelasan properti height dan width

Mengapa menggunakan properti height dan width

Apakah Anda pernah melihat konten dokumen yang menampilkan gerakan yang tak teratur saat memuat dokumen? Hal ini terjadi karena pelayar terus mengatur tata letak halaman untuk menampilkan setiap gambar yang dimuat. Pelayar mengunduh dan mengurai lebar dan tinggi gambar untuk menentukan ukuran gambar, kemudian akan meninggalkan ruang persegi yang sesuai di dalam jendela tampilan. kemudian pelayar akan mengatur tata letak tampilan halaman untuk memasukkan gambar ke dalam tampilan. Ini juga memberitahu kami bahwa gambar adalah berkas yang terpisah, yang dimuat secara terpisah dari berkas asli.

Tetapi ini bukan cara yang paling efektif untuk menampilkan dokumen, karena pelayar harus memeriksa setiap berkas gambar dan menghitung ruang layar sebelum menampilkan konten berikutnya dan berikutnya, yang dapat menyebabkan penundaan yang sangat besar dalam tampilan dokumen, dan dapat mengganggu bacaan pengguna.

Untuk penulis, cara yang lebih efektif adalah melalui properti height dan width <img> tag untuk menentukan ukuran gambar. Dengan cara ini, pelayar sudah menyiapkan tempat untuk gambar sebelum mengunduh gambar, sehingga dapat mempercepat tampilan dokumen, dan mencegah gerakan konten dokumen. Kedua properti ini harus berupa angka integer dan diungkapkan dalam satuan piksel untuk menunjukkan ukuran gambar. Urutan kedua properti di dalam tag <img> tak penting.

Masalah properti height dan width

Walaupun <img> tag mempunyai properti height dan width yang dapat meningkatkan prestasi dan memungkinkan Anda untuk melaksanakan beberapa teknik kecil, tetapi ada beberapa efek negatif yang berat saat digunakan. Meskipun pengguna telah menonaktifkan fungsi muat turun gambar otomatis, pelayar masih akan menampilkan ruang yang disediakan untuk gambar dengan ukuran yang ditentukan. Biasanya ini meninggalkan struktur kosong bagi penulis, dengan ikon yang tak mempunyai makna, untuk menandakan tempat penempatan gambar. Pada saat ini, halaman akan terlihat sangat buruk, seperti belum selesai, dan sebagian besar konten tak berguna. Jika tidak menggunakan ukuran yang ditentukan, pelayar hanya akan menempatkan ikon gambar di dalam teks, sedikit pun masih dapat dibaca dalam tampilannya.

对于这个问题我们还没有解决方案，只能强调一点，就是去使用 alt 属性 和一些描述性文字，这样读者至少知道这里缺少的是什么东西。我们还是建议您使用这些尺寸属性，因为我们鼓励一切能够改善网络性能的行为。

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

Tanda <img> HTML