Cara Membuat Gambar Responsif di Nextjs
Pada pengembangan web modern, responsivitas adalah kunci agar tampilan situs web dapat menyesuaikan dengan berbagai ukuran layar. Salah satu elemen yang sering perlu disesuaikan adalah gambar. Di Next.js, Anda dapat dengan mudah membuat gambar responsif menggunakan komponen Image yang disediakan oleh Next.js.
Langkah pertama adalah menambahkan elemen pembungkus dengan kelas image-container. Anda dapat menyesuaikan kode ini dengan kebutuhan styling Anda. Misalnya, jika Anda menggunakan styled-components, sintaksisnya sedikit berbeda. Berikut adalah contoh kode yang bisa Anda terapkan:
<div className={'image-container'}>
<Image src={path} layout="fill" className={'image'} />
</div>
Agar gambar dapat ditampilkan secara responsif, Anda harus menambahkan dua kelas: image-container untuk elemen pembungkus dan image untuk komponen Image. Setelah menambahkan kelas-kelas ini, Anda perlu menambahkan beberapa aturan CSS berikut:
.image-container {
width: 100%;
> div {
position: unset !important;
}
.image {
object-fit: contain;
width: 100% !important;
position: relative !important;
height: unset !important;
}
}Dengan kode di atas, gambar akan menyesuaikan dengan ukuran kontainer dan tetap mempertahankan proporsi aslinya, tidak terdistorsi. Gambar akan memenuhi lebar kontainer dan skalanya akan menyesuaikan sesuai ukuran layar pengguna.
Sekarang, gambar Anda seharusnya tampil dengan dimensi yang benar dan dapat menyesuaikan diri dengan ukuran layar yang berbeda. Dengan menggunakan pengaturan ini, gambar akan tetap responsif dan tampil secara optimal di berbagai perangkat.
Semoga artikel ini bermanfaat untuk membuat gambar responsif di proyek Next.js Anda! Terimakasih..
