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