Object Fit dan Object Position

Masalah gambar beda rasio

Foto profil landscape dipaksa ke kotak persegi: hasilnya gepeng atau melar. object-fit menyelesaikan ini dengan elegan, mirip background-size tapi buat elemen <img> dan <video>.

Lima nilai object-fit

.foto {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

• fill (default): gambar dipaksa pas, bisa gepeng
• cover: gambar menutupi seluruh bingkai, dipotong yang berlebih (tidak gepeng)
• contain: seluruh gambar terlihat, ada ruang kosong kalau rasio beda
• none: ukuran asli, dipotong kalau kebesaran
• scale-down: seperti contain tapi tidak diperbesar kalau gambar lebih kecil

cover adalah jawaban buat 90% kasus: thumbnail, avatar, hero image.

Contoh: avatar sempurna

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover; /* wajah tidak gepeng, apapun rasio fotonya */
}

Tanpa object-fit, foto landscape jadi oval. Dengan cover + border-radius 50%, selalu lingkaran sempurna.

object-position: atur titik fokus

cover memotong sisi gambar. Secara default potongannya seimbang (tengah). Kalau objek penting ada di tepi, geser fokusnya:

.foto-produk {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: top; /* fokus ke bagian atas gambar */
}

Nilai: top, bottom, left, right, center, atau persen/px presisi seperti object-position: 20% 80%.

Galeri seragam tanpa edit foto

.galeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.galeri img {
  width: 100%;
  aspect-ratio: 4 / 3; /* bingkai konsisten */
  object-fit: cover;
  border-radius: 8px;
}

Properti aspect-ratio mengunci perbandingan lebar-tinggi bingkai. Kombinasi aspect-ratio + object-fit = galeri rapi dari foto berantakan, tanpa perlu crop manual di editor.

Catatan teknis: selalu sertakan atribut width dan height di tag <img> (atau aspect-ratio di CSS) buat mencegah layout shift saat gambar loading. Browser bisa mencadangkan ruang yang tepat sebelum gambar tiba, skor Core Web Vitals ikut membaik.

Rangkuman

object-fit: cover buat gambar mengisi bingkai tanpa gepeng, contain buat tampil utuh, object-position buat atur fokus potongan. Pasangkan dengan aspect-ratio buat media yang konsisten, dan jangan lupa width/height buat cegah layout shift.