CARA MENGATUR UKURAN GAMBAR DI HTML DAN CSS

Mengatur ukuran gambar dalam pembuatan website adalah sebuah hal penting yang perlu dipelajari. Dengan mengetahui cara ini, kamu bisa membuat tampilan website menjadi lebih menarik dan profesional. Berikut adalah cara mudah mengatur ukuran gambar di HTML dan CSS.

Menggunakan HTML

Penggunaan HTML dalam mengatur ukuran gambar cenderung mudah dan langsung. Kamu hanya perlu menambahkan atribut width (lebar) dan height (tinggi) pada tag img.

Contoh penggunaannya adalah sebagai berikut:

<img src="gambar.jpg" width="500" height="600">

Dalam contoh di atas, ukuran gambar yang ditampilkan akan memiliki lebar 500 pixel dan tinggi 600 pixel. Perlu diingat, jika kamu menentukan ukuran dengan angka yang tidak sebanding, gambar bisa menjadi terdistorsi.

Menggunakan Persentase

Selain pixel, kamu juga bisa menggunakan persentase (%) untuk mengatur ukuran gambar. Hal ini sangat berguna jika kamu ingin gambar tersebut selalu mengisi sebagian dari elemen induknya.

<img src="gambar.jpg" width="50%" height="50%">

Dengan kode di atas, gambar akan selalu berukuran setengah dari lebar dan tinggi elemen induknya.

Menggunakan CSS

Mengatur ukuran gambar dengan CSS memberikan lebih banyak kontrol dan fleksibilitas.

Menggunakan Pixel atau Persentase

Sama seperti HTML, kamu bisa menentukan width dan height dalam pixel atau persentase. Namun, dalam CSS, kamu perlu menuliskannya dalam selector.

Contoh:

img {
  width: 500px;
  height: 600px;
}

Atau menggunakan persentase:

img {
  width: 50%;
  height: 50%;
}

Menggunakan Fitur object-fit

Fitur object-fit dalam CSS membuat gambar bisa ditampilkan dengan baik meski ukuran aslinya tidak sebanding dengan ukuran yang ditetapkan. Ada beberapa nilai yang bisa digunakan, seperti contain (mengecilkan gambar agar seluruhnya dapat ditampilkan) dan cover (menyembunyikan sebagian gambar agar bisa ditampilkan dengan sempurna).

Contoh penggunaannya:

img {
  width: 200px;
  height: 200px;
  object-fit: contain;
}

Cara mengatur ukuran gambar di HTML dan CSS sebenarnya cukup mudah, asalkan kamu tahu dasar-dasarnya. Semoga informasi ini bisa membantu kamu dalam belajar web development. Selamat mencoba!