Mengubah Ukuran Gambar dengan CSS

Cara Mudah Mengubah Ukuran Gambar dengan CSS – Untuk kamu yang baru saja belajar HTML CSS atau belajar membuat website, kamu pasti pernah menggunakan template atau mencoba membuat website sendiri dengan mengikuti tutorial gratis yang tersedia di internet, bukan? Tapi, karena pemula, biasanya kamu pasti akan bingung dengan beberapa hal. Salah satunya adalah:

Bagaimana cara ubah ukuran gambar dengan CSS?

Sebenarnya untuk mengubah ukuran gambar dengan CSS bisa dibilang mudah, loh! Di sini, DUMET School bakal kasih tahu caranya. Setelah ini, kamu bisa langsung praktekkan dan coba di rumah ya! Yuk, langsung saja.

1. Buka file HTML atau buat file baru dengan coding seperti ini:

Untuk bagian img src, di dalam tanda kutip bisa disesuaikan dengan nama file gambarnya ya! Jangan lupa juga perhatikan format gambarnya juga. (Seperti .jpg, .jpeg, .gif, .png, dan lain-lain). Oh iya, kamu juga bisa menghapus alt jika merasa itu tidak diperlukan.

2. Ketik kode CSS berikut dan lihatlah hasilnya.

Biasanya, nanti gambar akan berukuran besar dan melebihi kukuran container atau pembatas website.

3. Tambah kode berikut ini di bagian img tadi (beri width dan height).

Inilah kode untuk mengubah ukuran gambar dengan CSS. Sekarang kamu bisa coba save dan lihat perubahan pada gambarnya.

Bagaimana? Cukup mudah, bukan? Jadi, inti dari mengubah ukuran gambar dengan CSS adalah dengan menggunakan width dan juga height.

Kamu bisa mencoba dengan menuliskan coding lain dan cobalah untuk mengubah ukuran gambarnya agar kamu selalu ingat cara mengubahnya.

Dalam belajar HTML dan CSS, karena ada begitu banyak kode, sebaiknya kamu terus mempelajarinya dengan cara diulang-ulang ya agar selalu ingat dan menjadi mahir nantinya.

Nah, kalau kamu ingin jadi lebih mahir dalam membuat website, kamu bisa loh ambil paket kursus website di DUMET School. Di sini kamu akan dibimbing oleh instruktur benar-benar dari nol atau dasar. Jadi, pasti akan cocok untuk kamu yang memang benar-benar awam dengan coding.

Semoga artikel ini bermanfaat ya!