Bir görsel veya videonun sabit bir genişlik ve yükseklik kutusu içine konulduğunda ezilip büzülmeden nasıl sığacağını belirleyen CSS kuralıdır.
\n\nNasıl Çalışır ve Temel Prensipleri Nelerdir?
\nobject-fit: cover; (kutuyu doldurur ve taşanı kırpar), contain (tamamını gösterir) veya fill seçenekleriyle çalışır.
\n\nNeden Kritik Öneme Sahiptir?
\nFarklı boyutlarda yüklenen ürün fotoğraflarının veya blog kapak görsellerinin şablonu bozmadan kusursuz ve eşit büyüklükte görünmesini sağlar.
\n\nEn İyi Uygulama ve Kullanım İpuçları
\nKatalog ve blog listelerindeki görsellere 'width: 100%; height: 240px; object-fit: cover;' uygulayın.
\n\nSık Yapılan Hatalar ve Kaçınılması Gerekenler
\nObject-fit kullanmadan sabit genişlik ve yükseklik verip fotoğrafların basık ve sünmüş görünmesine yol açmak.
Sıkça Sorulan Sorular (SSS)
Object-Fit Nedir? (Görsel ve Video Kırpma Uyumu) hakkında en sık yöneltilen sorular ve mühendislik ekibimizin uzman yanıtları:
Görsel kırpılırken odak noktasının neresi olacağını (üst, merkez, alt) belirler (object-position: center top).
Evet, HTML5 <video> etiketlerinde de arka plan videolarını kutuya tam oturtmak için kullanılır.