Nesne uyumu - CSS Hileleri | CSS Almanak 2024

object-fitÖzelliği tanımlar içeriği kutunun yüksekliği ve genişliği için nasıl bir eleman yanıt verir. Mülkle bağlantılı olarak resimler, videolar ve diğer yerleştirilebilir medya biçimleri için tasarlanmıştır object-position. Kendi başına kullanıldığında, object-fitsatır içi bir resmi, kutusunun içinde nasıl ezildiği ve gerildiği konusunda bize hassas bir kontrol sağlayarak kırpmamıza olanak tanır.

object-fit şu beş değerden biriyle ayarlanabilir:

fill: Bu, en boy oranına bakılmaksızın görüntüyü içerik kutusuna sığacak şekilde uzatan varsayılan değerdir.
contain: en boy oranını korurken kutuyu doldurmak için görüntünün boyutunu büyütür veya küçültür.
cover: resim, bir kez daha en boy oranını koruyarak, ancak işlem sırasında resmi kırparak, kutusunun yüksekliğini ve genişliğini doldurur.
none: resim, üst öğenin yüksekliğini ve genişliğini yok sayacak ve orijinal boyutunu koruyacaktır.
scale-down: resim, en küçük beton nesne boyutunu bulmak için noneve containarasındaki farkı karşılaştıracaktır .

Bu özelliği şu şekilde ayarlayabiliriz:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

İkinci görüntü, soldaki orijinal görüntüden farklı bir en boy oranına sahip olduğu için, görüntünün üst ve alt kısımlarını kırparak içerik kutusunun dışına uzanacaktır.

Varsayılan olarak görüntünün içerik kutusu içinde ortalandığına dikkat etmek önemlidir, ancak bu object-positionözellik ile değiştirilebilir .

Demo

Aşağıdaki demo, bir görüntünün bazen orijinal genişliğinden daha küçük veya daha büyük olan bir içerik kutusuna nasıl sıkışmasını isteyebileceğimizi ayrıntılarıyla anlatan beş örnek göstermektedir (bunun nasıl çalışabileceğine dair daha iyi bir fikir için tarayıcıyı yeniden boyutlandırın):

CodePen'de Robin Rendle (@robinrendle) tarafından hazırlanan Pen nesne uyumuna bakın.

Görüntünün içeriği herhangi bir nedenle içerik kutusunu doldurmazsa, bu durumda doldurulmamış alan öğenin arka planını gösterecektir, bu örnekte açık gri bir arka plan.

Tarayıcı desteği

İOS 8-9.3 ve Safari 7-9.1'in object-fitmülkiyete sahip olduğunu ancak değil object-position.

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.