tetapan saiz imej html

Dalam reka bentuk web, gambar sering digunakan untuk meningkatkan kesan visual dan daya tarikan halaman. Walau bagaimanapun, jika saiz imej ditetapkan secara tidak betul, ia akan menjejaskan penampilan dan kelajuan memuatkan halaman web. Oleh itu, apabila menggunakan gambar, perhatikan tetapan saiz gambar. Artikel ini akan memperkenalkan cara menetapkan saiz imej dalam HTML.

Terdapat dua cara untuk menetapkan saiz imej dalam HTML:

1. Gunakan CSS untuk menetapkan saiz imej
2. Tetapkan saiz imej terus dalam HTML

Gunakan CSS untuk menetapkan saiz imej

Terdapat dua kaedah untuk menggunakan CSS untuk menetapkan saiz imej:

Kaedah 1: Ubah suai saiz imej dengan menetapkan atribut CSS lebar dan tinggi.

Sebagai contoh, kod di bawah menunjukkan cara menetapkan saiz imej kepada 100 piksel lebar dan 80 piksel tinggi.

<style>
img {
  width: 100px;
  height: 80px;
}
</style>
<img src="image.jpg">

Nota:

• Saiz imej yang ditetapkan mungkin diherotkan kerana lebar dan ketinggian tidak disegerakkan. Apabila menetapkan lebar atau ketinggian, sebaiknya tetapkan atribut lain pada masa yang sama untuk mengekalkan perkadaran asal imej.
• Imej dikurangkan atau dibesarkan secara berkadar, anda boleh menggunakan peratusan, sebagai contoh, lebar: 50%.

Kaedah 2: Hadkan saiz imej maksimum dengan menetapkan sifat CSS lebar maksimum dan ketinggian maksimum, dan imej akan mengecil secara automatik agar muat dalam had.

Sebagai contoh, kod di bawah akan mengehadkan saiz imej kepada lebar maksimum 200 piksel dan ketinggian maksimum 150 piksel.

<style>
img {
  max-width: 200px;
  max-height: 150px;
}
</style>
<img src="image.jpg">

Nota:

• Imej mengekalkan perkadaran asalnya dalam sekatan.

Tetapkan saiz imej terus dalam HTML

Kaedah lain ialah menetapkan saiz imej terus dalam teg HTML. HTML menyediakan atribut lebar dan ketinggian untuk menetapkan saiz imej.

Sebagai contoh, kod berikut menetapkan saiz imej kepada lebar 100 piksel dan ketinggian 80 piksel:

<img src="image.jpg" width="100" height="80">

Nota:

• Menetapkan imej dalam HTML Saiz menjejaskan kualiti imej kerana ia hanya mengecilkan imej dan tidak mengubah resolusi imej. Oleh itu, jika anda ingin menerbitkan imej berkualiti tinggi di tapak web atau blog anda, gunakan perisian penyuntingan imej yang sesuai untuk memproses dan memampatkannya.

Ringkasan

Menggunakan teg CSS atau HTML untuk menetapkan saiz imej adalah pilihan yang baik, bergantung pada keperluan reka bentuk anda dan struktur halaman web. Walaupun kaedah ini akan menjejaskan kesan visual imej dan kelajuan halaman, penggunaan yang betul boleh meningkatkan pengalaman pengguna dan prestasi halaman. Apabila menetapkan saiz imej, cuba pilih kaedah yang sesuai dan jangan buat pelawat tapak web anda menunggu terlalu lama.

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