Bagaimana untuk menetapkan saiz imej dalam html

HTML ialah bahasa penanda yang digunakan untuk membuat halaman web Ia boleh menambah pelbagai elemen dan kandungan pada halaman web, termasuk teks, imej, audio dan video, dsb. Antaranya, imej adalah elemen biasa dalam halaman web, tetapi kadangkala kita perlu mengawal saiz imej untuk menjadikannya lebih sesuai untuk susun atur kandungan web. Dalam artikel ini, kami akan meneroka cara menetapkan saiz imej menggunakan HTML.

Teg imej dalam HTML

Dalam HTML, kami menggunakan elemen img untuk menambah imej pada halaman web. Elemen img mempunyai atribut src, yang digunakan untuk menentukan alamat URL fail imej. Contohnya, untuk menambah imej bernama "example.jpg" pada halaman web, kita boleh menggunakan kod berikut:

<img src="example.jpg">

Dengan cara ini, penyemak imbas akan memaparkan imej dalam halaman web. Walau bagaimanapun, imej ini mungkin saiz yang berbeza daripada yang kita jangkakan, jadi kita perlu menggunakan sifat lain untuk mengawal saiz paparan imej.

Tetapkan saiz imej

HTML menyediakan dua atribut utama untuk menetapkan saiz paparan imej: lebar dan tinggi. Kedua-dua sifat ini digunakan untuk menetapkan lebar dan ketinggian imej, masing-masing, dalam piksel. Sebagai contoh, untuk menetapkan lebar imej kepada 200 piksel, anda akan menggunakan kod berikut:

<img src="example.jpg" width="200">

Begitu juga, untuk menetapkan ketinggian imej kepada 150 piksel, anda akan menggunakan kod berikut:

<img src="example.jpg" height="150">

Dengan cara ini, imej akan dipaparkan mengikut lebar dan ketinggian yang ditetapkan. Perlu diingat bahawa jika hanya satu daripada sifat yang ditetapkan, penyemak imbas akan secara automatik menskalakan imej secara berkadar agar sesuai dengan nilai harta yang lain. Sebagai contoh, jika hanya atribut lebar ditetapkan, penyemak imbas secara automatik akan mengira nilai ketinggian yang sepadan berdasarkan nisbah lebar kepada ketinggian imej asal.

Tetapkan lebar dan tinggi serentak

Selain menetapkan lebar dan tinggi secara berasingan, anda juga boleh menetapkan kedua-dua sifat ini pada masa yang sama. Dalam kes ini, imej akan diregangkan atau dimampatkan agar sesuai dengan saiz yang ditentukan oleh kedua-dua sifat. Contohnya, kod berikut menetapkan lebar imej kepada 200 piksel dan ketinggian kepada 150 piksel:

<img src="example.jpg" width="200" height="150">

Dengan cara ini, saiz imej ditetapkan kepada 200 piksel kali 150 piksel. Perlu diingat bahawa menetapkan lebar dan ketinggian pada masa yang sama boleh menyebabkan imej menjadi cacat, sekali gus menjejaskan kesan paparan imej.

Gunakan CSS untuk mengawal saiz imej

Selain menggunakan atribut HTML untuk menetapkan saiz imej, anda juga boleh menggunakan CSS untuk mengawal kesan paparan imej. Secara khusus, kita boleh menggunakan sifat lebar dan ketinggian dalam CSS untuk menetapkan saiz imej, contohnya:

<img src="example.jpg" style="width:200px;height:150px;">

Begitu juga, kita juga boleh mentakrifkan gaya CSS dalam helaian gaya luaran, contohnya:

<img src="example.jpg" class="thumbnail">

<style>
.thumbnail {
    width:200px;
    height:150px;
}
</style>

Dengan cara ini, kita boleh menggunakan elemen imej dengan kelas "gambar kecil" di seluruh tapak web dan saiznya akan ditetapkan kepada 200 piksel × 150 piksel.

Kesimpulan

Menetapkan saiz imej dalam HTML boleh membantu kami mengawal paparan imej dalam halaman web dengan lebih baik. Kita boleh menggunakan atribut lebar dan tinggi untuk menetapkan lebar dan tinggi imej masing-masing, atau kita boleh menetapkan kedua-dua atribut ini pada masa yang sama untuk menukar nisbah paparan imej. Selain itu, kami boleh menggunakan CSS untuk mengawal saiz imej dengan tepat, menjadikan halaman web lebih menarik dan boleh dibaca.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan saiz imej dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!