HTML memungkinkan kita untuk menggunakan gambar di halaman web dan membuatnya lebih menarik dengan menerapkan gaya yang berbeda. Jika Anda perlu mengubah rasio aspek gambar atau gambar Anda tidak sesuai dengan tata letak halaman web Anda, Anda dapat mengubah ukurannya. Untuk tujuan ini, Anda dapat menggunakan ' lebar ' dan ' tinggi ” properti pada “ gambar ” tanda. Nilai properti ini dapat dengan mudah diatur dalam piksel CSS.

Dalam manual ini, Anda akan mempelajari metode untuk mengubah ukuran gambar dalam HTML.

Sebelum memulai, diperlukan untuk menambahkan gambar ke file HTML di mana operasi pengubahan ukuran gambar akan dilakukan.

Bagaimana Cara Menyematkan Gambar di HTML?

Untuk menambahkan gambar dalam HTML, gunakan sintaks berikut:

Deskripsi sintaks yang disebutkan di atas dijelaskan di bawah ini. ' gambar ” tag menggunakan dua atribut:

• • 'src' digunakan untuk menyediakan jalur (URL) gambar.
  • 'semuanya' digunakan untuk memberikan teks alternatif jika gambar tidak ditampilkan.

HTML

Kode di bawah ini mewakili dua div. Di div pertama, kami menambahkan heading di tengah atas halaman web kami sebagai “ Ukuran Gambar dalam HTML ” dengan menggunakan tag

:

< div >
< tengah >
< h1 > Ukuran gambar di HTML h1 >
tengah >
div >

Div kedua ditambahkan dengan kelas bernama “ wadah ” dan untuk merepresentasikan gambar di tengah, kami telah menggunakan tag

. Di dalam bagian tengah, tulis kode yang disebutkan di bawah ini untuk menambahkan gambar:

< div kelas = 'wadah' >
< tengah >
< gambar src = 'gambar/kupu-kupu.jpg' semuanya = 'teks alternatif' >
tengah >
div >

Gambar yang dipilih dengan “ 640*437 ” rasio aspek akan terlihat seperti ini:

Bagian selanjutnya akan mendemonstrasikan metode untuk mengubah ukuran gambar.

Bagaimana Mengubah Ukuran Gambar dalam HTML?

Anda dapat menyesuaikan ukuran gambar atau mengubah ukurannya dengan menggunakan “ lebar ' dan ' tinggi ” atribut untuk mengatur lebar dan tinggi.

Sekarang, mari kita atur nilai lebar dari gambar yang ditambahkan sebagai “ 300 ” dan lihat cara kerjanya:

< gambar src = 'gambar/kupu-kupu.jpg' semuanya = 'teks alternatif' lebar = '300' >

Dapat dilihat bahwa lebar gambar telah diubah, dan ukurannya berhasil diubah:

Selain lebar, “ tinggi Atribut ” juga dapat digunakan untuk tujuan yang sama. Untuk melihat perbedaan ukuran, atur “ 550 ” piksel sebagai tinggi gambar:

< gambar src = 'gambar/kupu-kupu.jpg' semuanya = 'teks alternatif' lebar = '300' tinggi = '550' >

Anda dapat dengan jelas mengamati perbedaan ukuran gambar:

Begitulah cara atribut lebar dan tinggi digunakan untuk mengubah ukuran gambar.

Kesimpulan

Dalam HTML, ' tinggi ' dan ' lebar Atribut ” digunakan untuk mengubah ukuran gambar. Anda dapat mengubah rasio aspek default dari gambar yang ditambahkan dengan menyetel nilai atribut ini. Akibatnya, perbedaan yang jelas dapat dilihat sehubungan dengan ukuran gambar. Blog ini telah mendemonstrasikan metode untuk menggunakan properti tinggi dan berat untuk mengubah ukuran gambar dalam HTML.