Bagaimana untuk menukar saiz imej dalam html

Dalam reka bentuk web, gambar merupakan elemen yang sangat penting, yang boleh meningkatkan keindahan laman web dan menarik perhatian pengguna. Dalam banyak kes, kita perlu mengubah suai saiz imej untuk mencapai kesan terbaik. Artikel ini terutamanya memperkenalkan cara menggunakan HTML untuk mengubah suai saiz imej.

Dalam HTML, terdapat dua cara biasa untuk mengubah suai saiz imej: menggunakan atribut lebar dan ketinggian teg img dan menggunakan gaya CSS. Mari kita perkenalkan mereka satu persatu.

Gunakan atribut lebar dan ketinggian teg img

Teg img ialah teg yang digunakan untuk memasukkan imej dalam HTML Penggunaan paling asas adalah seperti berikut:

<img src="image.jpg" alt="图片" />

Antaranya, src Atribut digunakan untuk menentukan laluan imej, dan atribut alt digunakan untuk menambah penerangan pada imej. Sekarang kita perlu mengubah suai saiz imej, yang boleh dicapai melalui atribut lebar dan ketinggian. Kedua-dua atribut ini boleh menentukan lebar dan ketinggian imej, dan unit boleh menjadi piksel (px), peratusan (%) atau em (gandaan saiz fon berbanding dengan elemen induk).

Berikut ialah contoh:

<img src="image.jpg" alt="图片" width="200px" height="150px" />

Kod ini menetapkan lebar imej kepada 200 piksel dan ketinggian kepada 150 piksel. Perlu diingatkan bahawa jika hanya satu daripada sifat ditetapkan, sifat yang lain akan dilaraskan secara automatik mengikut perkadaran imej asal untuk memastikan imej tidak akan diregangkan atau dimampatkan.

Menggunakan gaya CSS

Selain menggunakan atribut lebar dan ketinggian teg img, kami juga boleh menggunakan gaya CSS untuk mengubah suai saiz imej. Kelebihan ini ialah saiz semua imej boleh dikawal secara seragam dalam satu helaian gaya, mengurangkan kod berulang.

Untuk menggunakan CSS untuk mengubah suai saiz imej, kita perlu menentukan kelas untuk teg img dan kemudian menetapkan gaya yang sepadan dalam CSS. Berikut ialah contoh:

<img src="image.jpg" alt="图片" class="picture" />

.picture {
  width: 200px;
  height: 150px;
}

Kod ini mencapai kesan mengubah suai saiz imej dengan menambahkan atribut kelas pada teg img dan mentakrifkan kelas .picture dalam CSS. Perlu diingatkan bahawa untuk memastikan gaya CSS berkuat kuasa, helaian gaya perlu dipautkan ke halaman web.

Pada masa yang sama, kita juga boleh menggunakan peratusan untuk menetapkan saiz imej, contohnya:

.picture {
  width: 50%;
  height: 50%;
}

Kod ini menetapkan saiz imej kepada separuh daripada saiz asal , yang memudahkan untuk melaksanakan reka bentuk gaya responsif untuk menyesuaikan diri dengan peranti dengan saiz skrin yang berbeza.

Ringkasan

Dalam reka bentuk web, menukar saiz imej adalah keperluan biasa. Kita boleh mencapai fungsi ini dengan mudah dengan menggunakan atribut lebar dan ketinggian tag img atau gaya CSS. Perlu diingatkan bahawa untuk memastikan prestasi halaman web, sebaiknya gunakan saiz imej yang sesuai untuk mengelakkan memuatkan imej yang terlalu besar yang menjejaskan pengalaman pengguna.

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