CARA MENGATUR UKURAN GAMBAR DI CSS

Mengatur ukuran gambar di CSS bisa menjadi kebutuhan penting ketika kamu sedang mengembangkan sebuah website. Ukuran gambar yang tepat akan membuat layout website lebih rapi dan juga mempengaruhi kecepatan loading halaman. Dalam artikel ini, kamu akan dipandu bagaimana cara mengatur ukuran gambar di CSS.

Menentukan Lebar dan Tinggi

Untuk mengubah ukuran gambar di CSS, kamu bisa mengatur properti lebar (width) dan tinggi (height) dari elemen gambar tersebut. Berikut adalah contoh cara mengubah lebar dan tinggi gambar:

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

Pada contoh ini, lebar gambar diatur menjadi 500 pixel dan tingginya 300 pixel. Kamu bisa mengganti angka tersebut sesuai dengan kebutuhan.

Menggunakan Persentase

Ketika mengatur lebar dan tinggi gambar, kamu juga bisa menggunakan persentase (%). Hal ini sangat berguna bila kamu ingin gambar tersebut responsif atau mengikuti ukuran dari elemen parent-nya.

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

Pada contoh ini, lebar gambar diatur menjadi 50% dari lebar elemen parent-nya, dan tinggi gambar diatur menjadi auto agar proporsi gambar tetap terjaga.

Aspek Rasio Gambar

Aspek rasio gambar adalah rasio antara lebar dan tingginya. Mengatur aspek rasio gambar di CSS bisa digunakan untuk memastikan gambar tetap terlihat baik meski lebarnya diubah.

img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

Pada contoh ini, aspek rasio gambar diatur menjadi 16:9, yang biasa digunakan untuk video dan gambar berformat “widescreen”.

Kesimpulan

Pada dasarnya, mengubah ukuran gambar di CSS cukup sederhana. Kamu hanya perlu menentukan lebar dan tinggi gambar, dan bisa juga menggunakan persentase untuk membuat gambar responsif. Selain itu, aspek rasio gambar bisa diatur untuk memastikan gambar tetap terlihat baik meski lebarnya diubah. Semoga artikel ini membantu kamu dalam mengatur ukuran gambar di CSS.

Perlu diingat bahwa praktik terbaik adalah selalu mencoba dan bereksperimen dengan kode kamu sendiri untuk memahami lebih lanjut tentang bagaimana cara kerja CSS ini. Selamat mencoba!