Object-fit

object-fit ile görsel sığdırma yöntemlerini öğrenirsin.

object-fit nedir?

Bir img veya video etiketini bir çerçevenin içine sığdırmak istediğinde, varsayılan davranış görseli bozarak uzatmaktır. object-fit özelliği, görselin çerçeveye nasıl sığacağını denetler.

En sık kullanılan iki değer: cover görseli kırparak çerçeveyi doldurur; contain görseli tamamen gösterir, gerekiyorsa boşluk bırakır. Fotoğraf galerilerinde cover, ürün önizlemelerinde contain tercih edilir.

object-position ile kırpma kaydır

object-fit: cover görseli kırpar, ancak kırpmayı ortalar. Bazen önemli bir yüz veya nesne çerçevenin dışında kalır. object-position özelliği kırpmayı kaydırır.

Değer olarak konum verirsin: center, top, top left gibi. Bir portre fotoğrafta yüzü üstte tutmak için object-position: top yazman yeterli.

Uygulama Galeri görseline cover ve oran ver

.gallery img seçicisine object-fit: cover ve aspect-ratio: 4 / 3 ver. Ayrıca width: 100% de ekle. Böylece görsel çerçeveyi kırparak doldurur.

Örnek çözümü göster

/* galeri görseli çerçeveye sığsın */
.gallery img {
  object-fit: cover;
  aspect-ratio: 4 / 3;
  width: 100%;
}

Kendini test et

Görselin tamamını göstermek için hangi değer seçilir?
- cover
- fill
- scale-down
- contain
Cevabı göster

contain — Doğru. contain görseli tamamen gösterir; gerekiyorsa boşluk bırakır.

object-fit özelliğini yaz

.thumb img {
  ____: cover;
  width: 100%;
  height: 100%;
}

Cevabı göster

.thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

object-fit değerlerini anlamına eşle

cover

Kırparak doldurur
contain

Tamamını gösterir
fill

Bozarak uzatır
scale-down

En küçük hali seçer

Sıradaki ders: Gap çoklu sütun

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler