UKURAN GAMBAR RESPONSIVE

Membuat ukuran gambar yang responsif adalah bagian penting dari desain web modern. Teknik ini memastikan tampilan gambar tetap tajam dan sempurna di layar berbagai ukuran, mulai dari smartphone hingga layar komputer desktop berukuran besar. Menerapkan ukuran gambar yang responsif juga membantu meningkatkan kecepatan loading website dan karenanya mempengaruhi SEO.

Membuat Gambar Menjadi Responsif Menggunakan CSS

Langkah pertama dalam membuat ukuran gambar responsif adalah dengan menambahkan beberapa gaya CSS ke dalam kode Anda. Menggunakan properti width dan height yang ditentukan dalam persen akan membuat gambar menyesuaikan ukuran dengan elemen induknya.

Berikut ini contoh kode CSS yang dapat kamu gunakan:

img {
  max-width: 100%;
  height: auto;
}

Pada contoh di atas, properti max-width diatur ke 100%, yang berarti lebar gambar tidak akan melebihi lebar elemen induknya. Sementara itu, properti height diatur ke auto yang berarti tinggi gambar akan menyesuaikan sendiri berdasarkan rasio aspek gambar aslinya.

Mengubah Ukuran Gambar Berdasarkan Layar

Dalam beberapa kasus, kamu mungkin ingin gambar menunjukkan ukuran yang berbeda berdasarkan ukuran layar. Sebagai contoh, gambar berukuran penuh mungkin cocok untuk ditampilkan di layar desktop, tetapi terlalu besar untuk layar smartphone.

Untuk situasi tersebut, kamu bisa menggunakan media query CSS. Media query memungkinkan kamu menetapkan aturan CSS tertentu berdasarkan ukuran layar perangkat yang digunakan.

Berikut adalah contoh cara mengubah ukuran gambar berdasarkan ukuran layar:

/* Pengaturan untuk layar dengan lebar kurang dari 600px */
@media (max-width: 600px) {
  img {
    width: 100%;
    height: auto;
  }
}

/* Pengaturan untuk layar dengan lebar lebih dari 600px */
@media (min-width: 601px) {
  img {
    width: 50%;
    height: auto;
  }
}

Dengan kode di atas, gambar akan menempati 100% lebar layar jika lebar layar kurang dari 600px (misalnya, pada smartphone), dan 50% lebar layar jika lebar layar lebih dari 600px (misalnya, pada desktop).

Dengan memahami dan menerapkan teknik ini, kamu bisa memastikan website Anda tampil sempurna dengan gambar yang responsif tidak peduli dari perangkat apa pengunjung mengaksesnya.