Cara Memperbaiki Gambar Gepeng atau Melebar Dengan CSS

Ada kalanya Kita ingin mempertahankan aspek rasio gambar disetiap halaman dan membuatnya pas didalam area yang sama.

Misalnya, Kita memiliki sistem manajemen konten yang memungkinkan bisa mengunggah gambar di situs pribadi, namun ukuran gambar kurang tepat. Sebenarnya Kita bisa mengubah aspek rasio untuk membuatnya pas di area yang sama, tetapi ini akan melelahkan karena harus edit gambar 1 per 1, terlepas dari itu semua dimensinya tidak akan selalu tepat, maka ini bukan solusi yang bagus.

Lalu bagaimana solusinya ???

Kita dapat menangani masalah ini dengan menggunakan properti css yaitu object-fit.

Berikut ini contoh codenya,

img {
width: 100%;
height: 350px; /* Ubah nilai height sesuai kebutuhan */
object-fit: cover;
object-position: center;
}

object-fit value yang dapat digunakan:

• fill, lebar dan tinggi gambar sesuai dengan kotak.
• cover, gambar menyimpan aspek rasio dan mengisi seluruh kotak, maka bagian yang terpotong tidak akan terlihat.
• contain, gambar menyimpan aspek rasio, bisa membesar dan mengecil untuk bisa memuat kedalam kotak.
• none, ukuran asli.
• scale-down, menampilkan salah satu seperti diatas, tergantung pada ukuran gambar.

object-position

Properti ini akan mengatur posisi gambar yang ada didalam kotak. Ada beberapa posisi yang dapat digunakan seperti center, top, right, bottom, left atau bisa juga menggunakan angka dengan px (pixel), % (percent) atau unit lainnya.

Secara default nilai dibawah ini akan menghasilkan posisi gambar di tengah kotak.

img {
width: 100%;
height: 350px; /* Ubah nilai height sesuai kebutuhan */
object-fit: cover;
object-position: 50% 50%;
}

Bedanya jika menggunakan angka seperti ini object-position: 50% 50%; Kita bisa mengatur posisi sesuai kebutuhan.

Demikianlah pembahasan mengenai Cara Memperbaiki Gambar Gepeng atau Melebar Dengan CSS semoga bermanfaat, terima kasih.